什么是HTML语义化

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

怎么使用HTML语义化标签

HTML为网页文档内容提供上下文结构和含义。通常我们所说的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>
    版权信息
</footer>

注意：

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

nav 元素

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

<nav>
    <ul>
        <li>第一部分</li>
        <li>其余部分</li>
    </ul>
</nav>

侧边栏上目录、面包屑导航、搜索样式、或者下一篇上一篇文章我们可能会想要用到nav，但是事实上规范上说nav只能用在页面主要导航部分上。页脚区域中的链接列表，虽然指向不同网站的不同区域，譬如服务条款，版权页等，这些footer元素就能够用了。

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

article 元素

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

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

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标签列表传送门