快速理解web语义化

什么是Web语义化

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

总结起来就是：

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

html 语义化标签

HTML为网页文档内容提供上下文结构和含义。对于HTML体系而言，Web语义化是指使用语义恰当的标签，使页面有良好的结构，让页面元素有含义，便于被浏览器、搜索引擎解析、利于SEO。通常我们所说的HTML应该是完全脱离表现信息的，其中的标签应该都是语义化地定义了文档的结构。
代码示例：

<html>
    <body>
        <article>
            <header>
                <h1>h1 - WEB 语义化</h1>
            </header>
            <nav>
                <ul>
                    <li>nav1 - HTML语义化</li>
                    <li>nav2 - CSS语义化</li>
                </ul>
            </nav>
            <section>
                section1 - HTML语义化
            </section>
            <section>
                section2 - CSS语义化
            </section>
            <time datetime="2018-03-23" pubdate>time - 2018年03月23日</time>
            <footer> footer - by 小维</footer>
        </article>
    </body>
</html>

html语义化标签包括 body, article, nav, aside, section, header, footer, hgroup, 还有 h1-h6 address等。

下面来简单介绍下常用的html语义化标签

header 元素

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

代码示例：

    <header>
        <hgroup>
            <h1>网站标题<h1>
            <h2>网站副标题</h2>
        </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，但是事实上规范上说nav只能用在页面主要导航部分上。页脚区域中的链接列表，虽然指向不同网站的不同区域，譬如服务条款，版权页等，这些footer元素就能够用了。

注意事项：

用于整个页面的主要导航部分，不适合就不要用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>评论者: 专业水军</h3>
                <p><time pubdate datetime="2018-03-23T15:10-08:00">~1 min ago</time></p>
            </header>
            <p>还行</p>
        </article>

        <article>
            <header>
                <h3>评论者: 大水怪</h3>
                <p><time pubdate datetime="2018-03-23T15:10-08:00">~1 hour ago</time></p>
            </header>
            <p>楼上说的对</p>
        </article>

    </article>

</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。section不是一般意义上的容器元素，如果想作为样式展示和脚本的便利，可以用div。
表示文档中的节或者段。
acticle、nav、aside可以理解为特殊的section，如果可以用article、nav、aside就不要用section，没有实际意义的就用div

aside元素

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

代码示例：

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

注意事项：

aside 在 article 内表示主要内容的附属信息。
在article之外侧可以做侧边栏，没有article与之对应，最好不用
如果是广告，其他日志链接或者其他分类导航也可以用。

html语义化小结

总之，HTML语义化是反对大篇幅使用无语义化的div+span+class，而鼓励使用HTML定义好的语义化标签。

当然，如果需要兼容低版本的IE浏览器，比如说IE8以及以下，那就需要考虑一些HTML5标签兼容性解决方案了。
更多标签及其兼容性请去往传送门
html5标签列表传送门

CSS语义化

CSS语义就是class和ID命名的语义。class属性作为HTML与CSS衔接的纽带，其本意是用来描述元素内容的。指用易于理解的名称对html标签附加的class或id命名。如果说HTML语义化标签是给机器看的，那么CSS命名的语义化就是给人看的。良好的CSS命名方式减少沟通调试成本，易于理解。

CSS命名首先要满足W3C的命名规范和团队的命名规范。其次是高效和可重用性。

就好像.main/.sidebar会比.left_content/.right_content的class命名灵活性更好。

<!-- 以表现为中心 -->
<div class="ft margin10">
    <span>用户名：小维</span>
<div>

<!-- 以信息为中心 -->
<p class="user_info">
    <em>用户名:小维</em>
<p>

看到这里，问题来了。既然CSS class和ID命名的语义化可以便于阅读理解和减少沟通调试成本，那么我们是不是可以用div 结合class和ID语义化命名的方式来代替html的语义化？

代码示例：

<html>
    <body>
        <div class="article">
            <div class="header">
                <h1>h1 - WEB 语义化</h1>
            </div>
            <div class="nav">
                <ul>
                    <li>nav1 - HTML语义化</li>
                    <li>nav2 - CSS语义化</li>
                </ul>
            </div>
            <div class="section">
                section1 - HTML语义化
            </div>
            <div class="section">
                section2 - CSS语义化
            </div>
            <div class="time">time - 2018年03月23日</div>
            <div class="footer"> footer - by 小维</div>
        </div>
    </body>
</html>

从代码的层面上来看，使用CSS class语义化的命名也是能够便于阅读和维护的，但是这样子并不利于SEO和屏幕阅读器识别。

知识拓展——ARIA

ARIA即Accessible Rich Internet Application，中文译为无障碍富互联网应用。可以为一些有功能障碍（如听力，视力）的人群通过屏幕阅读器例如voiceover等，提供无障碍访问动态、可交互Web内容。

而应用于HTML的ARIA有两部分组成：role 和aria-* 。

其中，role标识了一个元素的作用，aria-描述了与之有关的事物特征及其状态。

ARIA的具体使用规则可见ARIA in HTML

W3C对ARIA无障碍Web规范这样解释：

    Web developers may use the ARIA role and aria-* attributes on HTML elements, in accordance with the requirements described in [wai-aria-1.1], except where these conflict with the strong native semantics or are equal to the implicit ARIA semantics of a given HTML element.

    Setting an ARIA role and/or aria-* attribute that matches the implicit ARIA semantics is unnecessary and is not recommended as these properties are already set by the browser.

所以，如果使用的元素(HTML5)本身具有语义化，应该使用这些元素，而不用再重新定义一个添加ARIA的角色、状态或属性的元素。
例如：
nav已经隐含ARIA的role="navigation"声明，就不用在<nav>标签上在定义role或者aria就能被读屏软件识别。而没有语义化的元素如<div class="navigation">则推荐使用 role="navigation"。

END

web语义化包含了html标签语义化和css命名语义化。还有一个URL语义化，本文主要是对web语义化做一个简单快速的了解，就不展开了。更多内容和知识请参考:
如何理解Web语义化
 HTML 5的革新之一：语义化标签一节元素标签
 HTML 5的革新——语义化标签(二)

非常感谢前辈们的知识总结。

快速理解web语义化

什么是Web语义化

html 语义化标签

header 元素

hgroup 元素

footer 元素

nav 元素

article 元素

section 元素

aside元素

html语义化小结

CSS语义化

知识拓展——ARIA

END

heweixiao

引用和评论

探索Lighthouse性能分数计算背后的奥秘

前端开发工具

Jerry和您聊聊Chrome开发者工具

面向企业级前端应用的开发框架 UI5 的发展简史介绍

html如何实现跳转到锚点

这些年

一个用JavaScript生成思维导图(mindmap)的github repo