本文主要参考MDN中文文档

前言

标签的语义化是一个老生常谈的问题了，可能很多开发者一直习惯于div+span的开发模式，然后加个css类名来进行区分结构和写样式（没错我一直就是这样做的）。这样一来倒是省事，而且写个class自己也能看懂。另一方面，标签的语义化好处大家都会说，什么利于SEO，利于机器阅读这些。但是，标签语义化还有一个好处，那就是便于项目维护，如果是多人开发，或者后人修改前人的html结构的时候，看到一堆div然后class或是自己不能理解的英文或是拼半天不知道是什么意思的拼音的时候，可能内心是比较凌乱的，最后还得打开浏览器f12看页面元素。如果大家都使用统一的语义化标签而不是大量div开发，相信维护起来会容易很多。

当然我第一次体会到语义化标签的好处是在a标签的使用上，在许多网站的链接按钮上右击鼠标，会弹出“在新标签页打开链接”等几个选项，（前提是这个元素使用的是a标签）如果当前页要阅读的内容很多时，又想从当前页的按钮打开新的页面放着，等当前页看完了再看新的页签时，使用a标签的体验是极好的。而我的习惯是span加上点击事件...，当然也和我长期使用vue有关系（<router-link>虽然可以生成a标签,不过很多情况下我使用了编程式导航），一般单页应用并不用这样跳转，但是一旦处理复杂的多页应用时a标签还是很有必要的。由此，我便开始研究如何更好的使用语义化的标签。

那么言归正传，我们来看看有哪些值得注意的，开发中可能很有用，但可能很少用的HTML标签。

页面结构类的标签

<header>，<aside>，<footer>
这三个标签可以组成基本的，常见的页面结构。

• header用于展示介绍性内容，一般包含了标题元素，常见的组成部分有一排导航栏，logo，搜索框等等，也可以作为页面某一部分(如<article>)的前部。
• aside MDN上的解释是表示一个和其余页面内容几乎无关的部分，通常我们用它来做侧边栏。
• footer 这个标签不仅可以作为整个页面的页脚，也可以作为某一个章节内容(比如<atricle>)的页脚。

<section>，<article>，<figure>，<figcaption>

• section 表示文档中的一个区域（或节），一般通过是否包含一个标题 <h1>-<h6> 作为子节点 来 辨识每一个<section>。MDN上也给出了这个标签的注意事项（我表示基本没用过它）

• 如果元素内容可以分为几个部分的话，应该使用<article>，而不是<section>。
• 不要把<section>元素作为一个普通的容器来使用，这是本应该是<div>的用法，一般来说<section>应该出现在文档大纲中。

此外，<section>还可以嵌套使用，每一个<section>的标题最好从<h2>开始，避免在页面上重复使用<h1>（参考MDN——标题元素，这一点和网上的某些说法不太一样），对于<section>的具体使用场景，我的理解还不是很明确（怎样才算是应该出现在文档大纲中），按照MDN的提示，宁缺勿滥，如果不清楚怎么用还是用<div>比较好。

• article元素表示文档、页面、应用或网站中的独立结构。个人理解为，文章（帖子），用户提交的评论（长评论）可以用它，按照MDN上的例子，在<article>中使用<section>可以很清晰的划分<article>的结构。

• figure 代表一段独立的内容，同常作为一个引用单元来使用（引用的图片，插图，表格，代码段等等），<figcaption>是<figure>的标题，只能作为<figure>的第一个或者最后一个元素。比如在简书文章中插入图片就是一个引用，下方默认会带有说明文字，就是figcaption。

具有语义的非结构标签

<nav>
HTML导航栏 (<nav>) 描绘一个含有多个超链接的区域，这个区域包含转到其他页面，或者页面内部其他部分的链接列表。注意，并不是所有超链接区域都要用<nav>，一般在顶部导航栏或者侧边栏用它，MDN上明确指出在<footer>内的超链接没有必要使用<nav>。

<a>
<a> 元素（或称锚元素）可以创建通向其他网页、文件、同一页面内的位置、电子邮件地址或任何其他 URL 的超链接。a标签的重要性在前面已经说过，值得注意的是a标签的链接还能填入电子邮件地址，点击之后会打开默认的电邮软件。(我的电脑上装的是outlook)

<strong>和<em>
在 HTML4 时， Strong 简单地表示一个更强的强调(emphasis)，而在HTML5中，这个元素被描述为表征“内容强烈的重要性(strong importance for its contents) ”。这是一个重要的区别。Em标签(Emphasis)用于改变一个句子的意思(比如"我<em>喜欢</em>胡萝卜" 和"我喜欢<em>胡萝卜</em>"，分别强调喜欢和胡萝卜), Strong用来对一个句子的部分增加重要性(比如 "<strong>警告!</strong> 这里<strong>非常危险。</strong>") Strong和Emphasis都可以分别通过嵌套来增加相对重要性或强调重点。

<del>和<s>
<del>标签表示一些被从文档中删除的文字内容。比如可以在需要显示修改记录或者源代码差异的情况使用这个标签。比如在一篇文章中 1+1=3 更新：1+1=2

<s>使用删除线来渲染文本。使用 <s> 元素来表示不再相关，或者不再准确的事情。
（当表示文档编辑的删除的时候提倡使用<del>）

按照上面的定义，个人认为在电商网站上显示打折前的原价的时候使用这两个标签似乎都没错，打折的确是不再准确的价格，但也可以表示价格有改动，显示价格的修改记录。
(京东使用的就是<del>)。不过严格来讲<s>似乎要好一些，因为<del>表示“删除掉的文字内容”，而打折的价格是可以在之后改回去的。

<ruby>，<rt>，<rp>
这三个标签是组合在一起使用的，被用来展示东亚文字注音或字符注释。
<ruby>是最外层的标签，<rt>直接包裹注音或注释，<rp>用来在<rt>两边插入额外的文本，用于在不支持 ruby 注释显示的浏览器中提供友好的注释显示。
比如

<ruby>
  漢 <rp>(</rp><rt>Kan</rt><rp>)</rp>
  字 <rp>(</rp><rt>ji</rt><rp>)</rp>
</ruby>

显示出来的效果:

ruby(ルビ)

兼容性：

pc端 移动端

从浏览器支持情况来看，似乎不使用<rp>也是可以的，除非你真的需要兼容欧朋。

关于其他的标签

上面列出来的是我认为可以比较多的使用（当然常见的如<img>，<p>，<ul>这些的就不说了），也适合一般开发的标签，还有很多未列出来的标签因为种种原因我不会去使用它，如<hgroup>已经从HTML5（W3C）规范中删除。<time>（用来显示时间或日期，样式上没有改变）仍在设计和讨论中。<progress>和<meter>（用来显示进度条，不同浏览器的样式有区别）这类的标签一般使用ui框架都会提供完整的样式功能而不需要我们自己写。以及其它的一些平时几乎用不到的标签也略过不表了。

写在最后

使用这些标签的原则：宁缺勿滥，宁可用<div>，<span>也不要用自己并不熟悉的标签。

如果是团队开发的话，语义化标签的使用我认为也不是越多越好，最好是使用大家都已经理解会用的，并形成一套自己team的规范，这样的话既不会出现html结构看起来不清晰不利于维护，也不会出现滥用标签得不偿失的情况。