Web语义化(HTML5语义化标签)

转载文章：https://www.cnblogs.com/weixiao-he/p/8630084.html
做了部分补充

什么是Web语义化
Web语义化是指使用恰当语义的html标签、class类名等内容，让页面具有良好的结构与含义，从而让人和机器都能快速理解网页内容。包含了html标签语义化，css命名语义化，URL语义化。
语义化的web页面一方面可以让机器在更少的人类干预情况下收集并研究网页的信息，从而可以读懂网页的内容，然后将收集汇总的信息进行分析，结果为人类所用；另一方面它可以让开发人员读懂结构和用户以及屏幕阅读器（如果访客有视障）能够读懂内容。
简单来说就是利于 SEO，便于阅读维护理解。

总结起来就是：
1.正确的标签做正确的事情
2.页面内容结构化
3.无CSS样子时也容易阅读，便于阅读维护和理解
4.便于浏览器、搜索引擎解析。利于爬虫标记、利于SEO

html 语义化标签
HTML为网页文档内容提供上下文结构和含义。
对于HTML体系而言，Web语义化是指使用语义恰当的标签，使页面有良好的结构，让页面元素有含义，便于被浏览器、搜索引擎解析、利于SEO。
通常我们所说的HTML应该是完全脱离表现信息的，其中的标签应该都是语义化地定义了文档的结构。
html语义化标签包括 body, article, nav, aside, section, header, footer, hgroup,h1-h6 address等。

header 元素
header代表“网页”或者“section”的页眉，通常包含h1-h6 元素或者 hgroup, 作为整个页面或者一个内容块的标题。也可以包裹一节的目录部分，一个搜索框，一个nav，或者相关logo。

  <header>
        <hgroup>
            <h1>网站标题<h1>
        </hgroup>
    <header>

注意事项：
可以是“网页”或者任意“section”的头部部分
没有个数限制
如果hgroup或者h1-h6自己就能工作得很好，那么就没必要用header。

hgroup 元素
hgroup 元素代表“网页”或“section”的标题，当元素有多个层级时，该元素可以将h1到h6元素放在其内，譬如文章的主标题和副标题组合

<hgroup>
    <h1>这是一个主标题</h1>
    <h2>这是一个副标题</h2>
</hgroup>

注意事项：
如果只需要一个h1-h6标签就不用hgroup
如果有连续多个h1-h6标签就用hgroup
如果有连续多个标题和其他文章数据，h1-h6标签就用hgroup包住，和其他文章元数据一起放入header标签

footer 元素
footer元素代表“网页”或任意“section”的页脚，通常含有该节的一些基本信息，譬如：作者，相关文档链接，版权资料。如果footer元素包含了整个节，那么它们就代表附录，索引，提拔，许可协议，标签，类别等一些其他类似信息。

<footer>
    COPYRGHT@小维
</footer>

注意事项：
可以是“网页”或者任意“section”的底部部分
没有个数限制，除了包裹的内容不一样，其他跟header类似

nav 元素
nav 元素代表页面的导航链接区域。用于定义页面的主要导航部分。

<nav>
    <ul>
        <li>HTML语义化</li>
        <li>CSS 语义化</li>
    </ul>
</nav>

注意事项：
用于整个页面的主要导航部分，不适合就不要用nav元素了

article 元素
article 代表一个在文档，页面或者网站中自成一体的内容，其目的是为了让开发者独立开发或重用。
除了它的内容，article会有一个标题(通常会在header里)，一个footer页脚。

<article>
    <h1>你好，我是这边文章的标题</h1>
    <p>你好，我是文章的内容</p>
    <footer>
        <p>最终解释权归XXX所有</p>
    </footer>
</article>

如果在article内部再嵌套article，那就代表内嵌的article是与它外部的内容有关联的，如博客文章下的评论，如下：

<article>
    <header>
        <h1>web 语义化</h1>
        <p><time pubdate datetime="2018-03-23">2018-03-23</time></p>
    </header>
    <p>文章内容..</p>
    <article>
        <h2>评论</h2>
        <article>
            <header>
                <h3>评论1号</h3>
                <p>2022/01/26</p>
            </header>
            <p>还行</p>
        </article>
    </article>
</article>

article内部还可以嵌套section，如下：

<article>
    <h1>web语义化</h1>
    <p>什么是语义化？</p>
    <section>
        <h2>语义化详解</h2>
        <p>语义化就是。。。</p>
    </section>
    <section>
        <h2>语义化特点</h2>
        <p>语义化特点就是。。。</p>
    </section>
</article>

文章内section是独立的部分，但是它们只能算是组成整体的一部分，从属关系，article是大主体，section是构成这个大主体的一个部分。
注意事项：
自身独立情况下：用article
是相关内容： 用section
没有语义的： 用div

section 元素
section 元素代表文档中的“节”或“段”，“段”可以是指一片文章里按照主题的分段；“节”可以是指一个页面里的分组。section通常还带标题，虽然html5中section会自动给标题h1-h6降级，但是最好手动给他们降级。

<section>
    <h1>section是啥？</h1>
    <article>
        <h2>关于section</h2>
        <p>section的介绍</p>
        <section>
            <h3>关于其他</h3>
            <p>关于其他section的介绍</p>
        </section>
    </article>
</section>

注意事项：
一张页面可以用section划分为简介、文章条目和联系信息。不过在文章内页，最好用article。
acticle、nav、aside可以理解为特殊的section，如果可以用article、nav、aside就不要用section，没有实际意义的就用div

aside元素
aside 元素被包含在article元素中作为主要内容的附属信息部分，其中的内容可以是与当前文章有关的相关资料，标签，名词解释等。最典型的是侧边栏，其中的内容可以是日志串连，其他组的导航，甚至广告.

<article>
    <p>内容</p>
    <aside>
        <h1>作者简介</h1>
        <p>小维,哈哈哈</p>
    </aside>
</article>

注意事项：
在article之外侧可以做侧边栏，没有article与之对应，最好不用
如果是广告，其他日志链接或者其他分类导航也可以用。
ARIA
ARIA即Accessible Rich Internet Application，中文译为无障碍富互联网应用。可以为一些有功能障碍（如听力，视力）的人群通过屏幕阅读器例如voiceover等，提供无障碍访问动态、可交互Web内容。
而应用于HTML的ARIA有两部分组成：role 和aria-* 。
其中，role标识了一个元素的作用，aria-描述了与之有关的事物特征及其状态。
ARIA的具体使用规则可见ARIA in HTML
所以，如果使用的元素(HTML5)本身具有语义化，应该使用这些元素，而不用再重新定义一个添加ARIA的角色、状态或属性的元素。
例如：
nav已经隐含ARIA的role="navigation"声明，就不用在标签上在定义role或者aria就能被读屏软件识别。而没有语义化的元素则推荐使用 role=“navigation”。

如何构建 URL 以实施 SEO 的一些常规方法
使用连字符 (-) 作为分隔符来命名页面，避免使用驼峰式拼写、下划线和空格。
尽量避免使用查询参数。如有必要，请将查询参数限制在两个以内。
如果可用，请使用目录结构指示信息架构。
如果目录结构不可用，请在 URL 中使用 Sling 选择器，而不是查询字符串。除了它们提供的 SEO 价值之外， Sling 选择器还会使调度程序可以缓存页面。
URL 的可读性越强，越好；在 URL 中显示关键字会提高 SEO 价值。
在页面上使用选择器时，首选提供语义值的选择器。
尽量避免使用子域，因为搜索引擎会将子域视为不同的实体，进而分割站点的 SEO 价值。相反，请使用第一级子路径。例如，使用 www.mybrand.com/es/home.html，而不是 es.mybrand.com/home.html。
根据本准则，规划内容层次结构以便与内容的呈现方式匹配。
URL 中的关键字有效性与 URL 长度和关键字位置成反比，URL 长度越长和关键字位置越靠后有效性越低。换句话说，URL 越短越好。
使用 AEM 提供的 URL 缩短技术和功能删除不必要的 URL 片段。
使用规范 URL。
当 URL 来自不同路径或具有不同参数或选择器时，请确保在页面上使用 rel=canonical 标记。
可将其纳入 AEM 模板的代码中。
尽量将 URL 与页面标题匹配。
支持 URL 请求不区分大小写。将调度程序配置为将所有入站请求重写为小写字母。
确保每个页面仅通过一种协议提供。
某些网站会通过 http 提供，直到用户访问包含结账或登录表单等内容的页面时为止，此时网站将切换成 https。当从这个页面进行链接时，如果用户可以返回到 http 页面并通过 https 进行访问，则搜索引擎会将二者作为两个单独的页面进行跟踪。
目前，Google 首选的页面是 https 而不是 http。因此，通过 https 提供整个站点更好。

AEM
Adobe Experience Manager是Adobe的一个基于Web开发，用于建立，管理，开发网页以及相关服务的C/S系统
作用：将数字资产管理与内容管理系统的强大功能相结合，可以更快速地为您提供以内容为导向的个性化体验。