如何理解 HTML 语义化

你是如何理解 HTML 语义化的？(面试)

在了解 HTML 语义化之前，先科普一下下面几个名词：

• 语义：是语言所蕴含的意义 (语言的含义)。简单的说，符号是语言的载体，符号本身没有意义，只有赋予含义的符号才能够被使用，此时语言就转化为了信息。

• SEO（Search Engine Optimization）: 译为搜索引擎优化，是一种 利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名 的方式。能够提高有效访问量。

背景

最开始的时候，网页是后台去写的，那个时候的 HTML 结构可能是一堆 table 推砌而成，连续 table 的嵌套让页面做出来之后难以维护。(原始/荒野阶段)

后来，在没有提出 HTML 结构语义化之前的 HTML 结构，相比荒野阶段又有了一些改观，就是 (美工阶段)，举例来说就是：如果所有标签都使用 div，只要灵活使用 CSS，你也能写出视觉效果很好的页面 (最泛滥的 div + CSS)，但这就是一堆没有语义的冷冰冰的标签。。

虽然视觉上达到了要求，但是整个页面一点语义也没有。所以我们要尽可能避免使用一堆无意义的标签去堆自己的 HTML 结构。

什么是语义化

这里的语义化，顾名思义，就是在书写 HTML 结构的时候，要用相对应的有一定语义的标签表示和标记。

更专业的来说就是，根据内容的结构化（内容语义化），选择合适的标签（代码语义化），便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器更好地解析。

HTML 本身就是一门标记语言，所有标签都是有自己的语义的，例如我们常用的：

• div：division (分隔)
• span: span (范围)
• ol: Ordered List （排序列表）
• ul: Unordered List (不排序列表)
• li: List Item (列表项目)
• …

HTML 语义化，不仅对书写者自己来说，易于阅读，其他人阅读你的代码和结构的时候也更容易理解，甚至是对于一些非开发者来说。

为什么要语义化

除了上述所说，具体为什么要语义化，有以下几点原因：

1. 各个语义化的标签都或多或少带着官方设定好的样式，若是整个页面是由 div + CSS 构成，那么如果 CSS 没有加载出来，对页面来说可能将是一场噩梦；
   原因1：(当然上述是极端情况)为了在没有 CSS 的情况下(纯粹的 HTML 页面)，页面也能呈现出很好的内容结构、代码结构：裸奔更好看
2. 各种标签的灵活使用，而不是使用单一标签实现页面各种结构和内容，例如：元素的 alt 和 title 同时设置时，alt 作为图片的替代文字出现，title 是图片的解释文字；label 标签的活用；
   原因2：极大程度利用标签的特点，优化用户体验
3. 和搜索引擎建立良好的沟通，有助于爬虫爬取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；
   原因3：有利于 SEO
4. 难免会有些特殊设备需要访问网页（例如：屏幕阅读器、盲人阅读器和移动设备等），此时代码的语义化就显得格外重要；
   原因4：方便其他设备解析以语义化的方式来渲染网页
5. 语义化更具有可读性，遵循 W3C 标准的团队都遵循这个标准，可以减少差异化。
   原因5：便于团队开发和维护

怎样做到 和 怎样算是语义化的 HTML 结构

关于怎样做到 HTML 语义化，我们需要注意以下几点：

• 尽可能少的使用无语义的标签 div 和 span；(其实它们也并非完全无语义，个人觉得是相对的)；
• 在语义不明显时，比如：既可以使用 div 也可以使用 p，那么尽量使用相对比较有语义化的标签 p，因为 p 在默认情况下有上下间距，对兼容特殊终端有利；
• 不要使用纯样式标签，如：b、font、u 等，改用 CSS 设置；
• 需要强调的文本，可以包含在 strong 或 em 标签中，strong 默认样式是加粗（不要用 b），em 是斜体（不要用 i）；
• 使用表格时，标题要用 caption，表头用 thead，主体部分用 tbody 包围，尾部用 tfoot 包围，表头和一般单元格要区分开，表头用 th，单元格用 td；
• 表单域要用 fieldset 标签包起来，并用 legend 标签说明表单的用途；
• 每个 input 标签对应的说明文本都需要用 label 标签，并且通过 input 设置 id 属性，在 label 标签中设置 for= input的id 来让说明文本和相对应的 input 关联起来；
• 补充：不仅写 HTML 结构需要语义化，用语义化标签，给元素写 CSS 类名时，也要遵循语义化原则，不要随便取名字就用，这样以后重构或者阅读代码时，会很难读懂。另外，最好使用英文，而不是用汉语拼音凑合代替（low）。

扩展

结构 (html) 才是重点，样式 (css) 是用来修是结构的。所以要先确定 html，确定标签，再来选用适合的 css。

当我们想表达文章的标题，我们或许会这样写：

<div class="title">我是标题</div>

这个时候看代码的或者页面的访客或许可以理解我们的意思，但是 搜索引擎 / 特殊设备 就要反复揣摩了，它们只能通过分析源码来体现或猜测网站想要表达的内容。然后我们像下面这样：

<h1 class="title">这才是标题</h1>

h1 突出标题，用 strong 来突出关键字，就是语义化的体现。如果你还需要不同的呈现，再通过 css 去实现。

h1 拥有最高的权值，在一个页面中最好只使用1个 h1 来突出内容，太多的 h1 会分散其整个页面的权重，对搜索引擎也是非常不友好的。想要使用多个 h1~h6，可以使用 hgroup 标签包住(html5 新增语义化标签)。

总结

简单的来说，就是当需要表达段落的时候用 p 标签，需要表示标题的时候逐级用 h1-h6 标签，整体文章用 article 标签等。HTML 语义化就是使用语义化的标签来实现 HTML (结构)语义化和 代码 （标签)语义化。因为这样更能让人读懂页面和代码，更能发挥不同标签不同场景下的功能，同时还对搜索引擎和特殊设备友好，大家都遵循规范，减少差异化，有利于开发和维护。

扩展：HTML 新增的语义化标签

header

该元素代表 网页 或 section 的页眉 (头部)。

通常包括 h1-h6 元素或 hgroup，作为整个页面或者一个内容块的标题。也可以包裹一节的目录部分，一个搜索框，一个 nav 或者任何相关的 logo。(如果标签能自己存在，就不要用header)

整个页面没有限制 header 元素的个数，可以为每个内容块增加一个 header 元素。

footer

该元素代表 网页 或 section 的页脚 (底部)，通常也含有该节的一些基本信息，譬如：作者，相关文档链接，版权资料等。如果footer元素包含了整个节，那么它们就代表附录，索引，提拔，许可协议，标签，类别等一些其他类似信息。没有个数限制，除了包裹内容不一样，其他跟 header 类似。

hgroup

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

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

nav

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

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

aside

该元素被包含在 article 元素中作为主要内容的附属信息部分，其中的内容可以是与当前文章的相关资料、标签、名词解释等。(特殊的 section)

在 article 元素之外使用作为页面或站点全局的附属信息部分。**没有 article 与之对应，最好不用。**最典型的是侧边栏，其中的内容可以是日志串连，其他组的导航，甚至广告，这些内容相关的页面。如果是广告，其他日志链接或者其他分类导航可以用。

section

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

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

一张页面可以用section划分为简介、文章条目和联系信息。不过在文章内页，最好用article。section不是一般意义上的容器元素，如果想作为样式展示和脚本的便利，可以用div。

article、nav、aside可以理解为特殊的section，所以如果可以用article、nav、aside就不要用section，没实际意义的就用div。

article

该元素最容易跟 section 和 div 容易混淆，其实 article 代表一个在文档，页面或者网站中自成一体的内容，其目的是为了让开发者独立开发或重用。譬如论坛的帖子，博客上的文章，一篇用户的评论，一个互动的widget小工具。（特殊的section）

除了它的内容，article会有一个标题（通常会在header里），会有一个footer页脚。

如果在 article 内部再嵌套 article，那就代表内嵌的 article 是与它外部的内容有关联的，如博客文章下面的评论。article 内部嵌套 article，有可能是评论或其他跟文章有关联的内容。

<article>

    <header>
        <h1>一篇文章</h1>
        <p><time pubdate datetime="2012-10-03">2012/10/03</time></p>
    </header>

    <p>文章内容..</p>

    <article>
        <h2>评论</h2>

        <article>
            <header>
                <h3>评论者: XXX</h3>
                <p><time pubdate datetime="2012-10-03T19:10-08:00">~1 hour ago</time></p>
            </header>
            <p>哈哈哈</p>
        </article>

        <article>
            <header>
                <h3>评论者: XXX</h3>
                <p><time pubdate datetime="2012-10-03T19:10-08:00">~1 hour ago</time></p>
            </header>
            <p>哈？哈？哈？</p>
        </article>

    </article>

</article>

那 article 内部嵌套 section 一般是从属关系，article 是大主体，section 是构成这个大主体的一部分。本网站的全部文章都是 article 嵌套一个个 section 章节，这样能让浏览器更容易区分各个章节所包括的内容。

<article>

    <h1>前端技术</h1>
    <p>前端技术有那些</p>

    <section>
        <h2>CSS</h2>
        <p>样式..</p>
    </section>

    <section>
        <h2>JS</h2>
        <p>脚本</p>
    </section>

</article>

而 section 内部嵌套 article 相当于 section 将自成一体的 article 包裹，组成一个团体。

<section>
    
    <h1>介绍: 网站制作成员配备</h1>

    <article>
        <h2>设计师</h2>
        <p>设计网页的...</p>
    </article>

    <article>
        <h2>程序员</h2>
        <p>后台写程序的..</p>
    </article>

    <article>
        <h2>前端工程师</h2>
        <p>给楼上两位打杂的..</p>
    </article>

</section>

• 自身独立的情况下：用article
• 是相关内容：用section
• 没有语义的：用div

HTML5节元素标签包括body article nav aside section header footer hgroup ，还有h1-h6 address。

address 代表区块容器，必须是作为联系信息出现，邮编地址、邮件地址等等,一般出现在 footer。
h1-h6 因为 hgroup，section 和 article 的出现，h1-h6 定义也发生了变化，允许一张页面出现多个 h1。

参考博文

HTML 5的革新
HTML 结构语义化
如何理解 HTML 结构的语义化