一，什么是HTML语义化标签

根据内容的结构化（内容语义化），选择合适的标签（代码语义化），便于开发者阅读和写出更易维护和理解的代码，同时让浏览器的爬虫和机器很好地解析（这也是SEO的一部分）。

二，为什么要语义化？

1，为了在没有CSS的情况下，页面也能呈现出很好地内容结构、代码结构：为了裸奔时好看
2，用户体验：例如title、alt用于解释名词或解释图片信息、label标签的活用
3，有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重
4，方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页
5，便于团队开发和维护，语义化更具可读性，是下一步网页的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化

三，实际开发中需要注意的点

1，尽可能少的使用无语义的标签div和span；
2，在语义不明显时，既可以使用div或者p时，尽量用p, 因为p在默认情况下有上下间距，对兼容特殊终端有利；
不要使用纯样式标签，如：b、font、u等，改用css设置。
3，需要强调的文本，可以包含在strong或者em标签中（浏览器预设样式，能用CSS指定就不用他们），strong默认样式是加粗（不要用b），em是斜体（不用i）；
4，使用表格时，标题要用caption，表头用thead，主体部分用tbody包围，尾部用tfoot包围。表头和一般单元格要区分开，表头用th，单元格用td；
5，表单域要用fieldset标签包起来，并用legend标签说明表单的用途；
6，每个input标签对应的说明文本都需要使用label标签，并且通过为input设置id属性，在lable标签中设置for=someld来让说明文本和相对应的input关联起来。

四，标签详解

在这里插入图片描述

1，header

通常被放置在页面或者页面中某个区块元素的顶部，包含整个页面或者区块的标题、简介等信息，起到引导与导航的作用。

我们不但可以放置页面或者页面中某个区块的标题，还可以放置搜索表单、logo图片等元素，按照最新的W3C标准，我们还可以放置<nav>导航栏。

实例：

<header>
    <img src="images/logo.png" alt="**科技" />
    <h1>**信息科技有限公司</h1>
</header>

需要注意的是，一个文档中可以包含一对或者一对以上的<header>标签。标签的位置是次要的，不一定非要显示在页面的上方，我们可以为任何需要的区块标签添加<header>元素，例如下面将要讲解的<article> <section>等标签。

2，nav

表示页面的导航，可以通过导航连接到网站的其他页面，或者当前页面的其它部分。

<nav>不但可以作为页面独立的导航区域存在，我们还可以在<header>标签中使用。此外，<nav>标签还可以显示在侧边栏中。由此可见，一个页面之中可以有多个<nav>标签。

根据HTML5标准，<nav>标签只用于页面的主要导航部分。因为搜索引擎或者屏幕阅读器会根据<nav>标签来确定网站的主体内容，所以并不是任意一组超链接都适合放置在其中，我们只要将主要的，基本的链接组放入即可，对于有辅助性的页脚链接则不推荐使用<nav>标签。

注意：HTML5规范不允许将<nav>标签嵌套在<address>标签中使用。

示例：

<header>
    <img src="images/logo.png" alt="**科技" />
    <h1>**信息科技有限公司</h1>
    <nav>
        <li><a href="#">首页</a></li>
        <li><a href="example.html">客户案例</a></li>
        <li><a href="service_one.html">技术服务</a></li>          
        <li><a href="aboutus_one.html">关于我们</a></li>
        <li><a href="connection.html">联系我们</a></li>
    </nav>
</header>

3，aside

所包含的内容不是页面的主要内容、具有独立性，是对页面的补充。

<aside>标签一般使用在页面、文章的侧边栏、广告、友情链接等区域。

示例：

 <article>
    <h1>HTML5学习之语义化标签</h1>
    <p>....正文.....</p>
    <aside>
        <h2>什么是语义化标签</h2>
        <p>语义化标签就是......</p>
    </aside>
</article>

4，footer

一般被放置在页面或者页面中某个区块的底部，包含版权信息、联系方式等信息。

跟<header>标签一样，<footer>标签的使用个数没有限制，可以在任意需要的区块底部使用。

示例：

<footer>
    <small>
        版权所有 © 2016-2017 **信息科技有限公司
    </small>
</footer>

5，article

表示包含于一个文档、页面、应用程序或网站中的一段独立的内容，可以被独立的发布或者重新使用文章标记标签。

<article>标签应该使用在相对比较独立、完整的的内容区块，所以我们可以在一篇博客、一个论坛帖子、一篇新闻报道或者一个用户评论中使用它。通常情况下，一个<article>元素包括标题、正文和脚注。和<nav>标签一样，该标签同样不能用在<address>标签中。

示例：

<article>
    <h1>HTML5学习之语义化标签</h1>
    <p>....正文.....</p>
    <footer>版权所有*伪版必究</footer>
</article>

<article>标签还可以嵌套使用，但是它们必须是部分与整体的关系。例如在一篇发表的博客中，我们可以对读者评论使用该标签。

示例：

<article>
    <h1>HTML5学习之语义化标签</h1>
    <p>....正文.....</p>
    <article>
        <header>
            <h2>读者评论</h2>
        </header>  
        <article>
            <header>
                <h3>评论人：张三</h3>
                <p>评论时间：<time datetime="2017-02-15">2017-02-15 11:45:23</time></p>
            </header>
            <p>张三到此一游</p>
        </article>     
        <article>
            <header>
                <h3>评论人：李四</h3>
                <p>评论时间：<time datetime="2017-02-09">2017-02-09 14:20:15</time></p>
            </header>
            <p>李四到此一游</p>
        </article>  
     </article>  
</article>

6，section

是一个主题性的内容分组，通常用于对页面进行分块或者对文章等进行分段

<section>标签所包裹的是有一组相似的主题的内容，可以用这个标签来实现文章的章节、标签式对话框中的各种标签页等类似的功能。

<section>通常包含一个头部<header>、可能还会包含一个尾部<footer>。

示例：

<article>
    <h1>JavaScript框架</h1>
    <p>Javascript框架是指以Javascript语言为基础搭建的编程框架。</p>
    <section>
        <h2>angular.Js<h2>
        <p>angular.Js是一款优秀的前端JS框架</p>
    </section>
    <section>
        <h2>Vue.js<h2>
        <p>Vue.js是用于构建交互式的Web界面的库</p>
    </section>
    <section>
        <h2>jQuery<h2>
        <p>jQuery是一个快速、简洁的JavaScript框架。</p>
    </section>
</article>

在这篇关于JS框架的文章中,所列举的三个框架都是文章主题构成的一部分，所以我们使用<section>标签对其进行分段。

我们不但可以在<article>标签中使用<section>标签，还可以在<section>标签中使用<article>标签。

示例：

<section>
    <h1>HTML5技术栈</h1>
    <p>广义而言的HTML5包含HTML、CSS和JavaScript三个部分</p>
    <article>
        <h2>HTML<h2>
        <p>内容</p>
    </article>
    <article>
        <h2>CSS<h2>
        <p>样式</p>
    </article>
    <article>
        <h2>JavaScript<h2>
        <p>行为</p>
    </article>
</section>

注意：
<div> <section> <article>三者的比较：

<div>：应用广泛，只要我们想为一个区域定义一个样式或者为其添加JS行为，就可以使用div标签
<section>：包含的内容是一个明确的主题，通常有标题区域
<article>：如果我们的页面中需要一个单独的模块来实现一个单独的功能，就用<article>，其他的时候都用<section>。

7，hgroup

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

示例：

<hgroup>
    <h1>这是一篇介绍HTML 5语义化标签和更简洁的结构</h1>
    <h2>HTML 5</h2>
</hgroup>

8，address

代表区块容器，必须是作为联系信息出现，邮编地址、邮件地址等等,一般出现在footer。

示例：

<address>
    Written by 
    <a href="mailto:webmaster@example.com">Jon Doe</a>.<br> 
    Visit us at:<br>
    Example.com<br>
    Box 564, Disneyland<br>
    USA
</address>

9，table、caption、thead、tr、th、tbody、td、tfoot

使用表格时，标题用caption，表头用thead，主体部分用tbody包围，尾部用tfoot包围。表头和一般单元格要区分开，表头用th，单元格用td

<table>
   <caption>支出统计</caption>
   <thead>
       <tr>
           <th>娱乐项目</th>
           <th>项目支出</th>
       </tr>
   </thead>
   <tfoot>
       <tr>
           <td>Sum</td>
           <td>$180</td>
      </tr>
   </tfoot>
   <tbody>
       <tr>
           <td>聚餐</td>
           <td>200元</td>
       </tr>
   </tbody>
</table>

10，h1、h2、h3、h4、h5、h6

<h1>、<h2>、<h3>、<h4>、<h5>、<h6>，作为标题使用，并且依据重要性递减。<h1>是最高的等级。

11，p
段落标记，使用<p>作为段落，不必再使用<br/>来换行，而且不需要<br/>来区分段落与段落。<p></p>中的文字会自动换行，而且换行的效果优于<br>。

12，b、em、strong

<b>标签语义为“加粗”

<em>标签语义为“强调”

<strong>标签语义为“更强烈的强调” 而且em 默认用斜体表示，strong 用粗体表示。

当我们知道了这三个标签的语义时，做SEO时就好决定用哪个来强调重要的关键字了，强调用<em>和<strong>，纯粹加粗用<b>。

13，ul、ol、li
<ul>标签语义为定义无序列表

<ol>标签语义为定义有序列表

<li>标签语义为定义列表项目

因此当涉及到列表的项目，应该用<ul><li>或<ol><li>（或者是<dl><dt><dd>来布局），而不是用<table>或<p>甚至<span>。

14，dl、dt、dd

<dl>标签语义为定义了定义列表

<dt>标签语义为定义了定义列表中的项目（即术语部分）

<dd>标签语义为定义列表中定义条目的定义部分

所以，当我们用带标题的列表时，即可采用<dl><dt><dd>自定义列表实现

示例：

<dl>
    <dt>列表标题</dt>
    <dd>列表内容</dd>
    <dd>列表内容</dd>
</dl>

首先dt和dd是放于dl标签内，标签dt与dd处于dl下相同级。也就是dt不能放入dd内，dd不能放入dt内。在dl下，dt与dd处于同级标签。DD标签可以若干。同时不能不加dl地单独使用dt标签或dd标签。

15，q、blockquote、cite

<q>标签的语义为用来标记简短的单行引用，Web浏览器会自动识别在<q>之间的内容

<blockquote>标签的语义为用来标记那些一段或者好几段的长篇引用

<cite>标签既可以与<q> 一起用，也可以与<blockquote>一起用，用来提供引用内容的来源地址。

示例：

<blockquote cite="http://www.w3cn.org/">
    <p>&#8220;我们大部分人都有深刻体验，每当主流浏览器版本的升级，我们刚建立的网站就可能变得过时，我们就需要升级或者重新建造一遍网站。
例如1996-1999年典型的"浏览器大战"，为了兼容 Netscape 和 IE，网站不得不为这两种浏览器写不同的代码。
同样的，每当新的网络技术和交互设备的出现，我们也需要制作一个新版本来支持这种新技术或新设备，例如支持手机上网的 WAP 技术。
类似的问题举不胜举：网站代码臃肿、繁杂浪费了我们大量的带宽；针对某种浏览器的 DHTML 特效，屏蔽了部分潜在的客户；
不易用的代码，残障人士无法浏览网站等等。这是一种恶性循环，是一种巨大的浪费。&#8221;
    </p>
</blockquote>

16，label

<label>标签的语义为为input元素定义标注（标记）

17，ins、del

<ins>标签的语义为定义已经被插入文档中的文本。

<del>标签的语义为定义文档中已被删除的文本。

<ins>与 <del> 一同使用，来描述文档中的更新和修正。知道del，就不要再用<s>做删除线了，用del显然更具有语义化。而且del还带有cite和datetime来表明删除的原因以及删除的时间。ins是表示插入，也有这样的属性。

18，ruby、rt、rp

ruby是一种排版注释系统，是位于横排基础文本上方的简短文字，主要针对东亚语言作出简单的读音注释。例如可以为中文或日文显示读音。

ruby涉及的元素包括ruby、rt以及rp。首先使用ruby指定一个具体的表达式，然后使用rt提供说明。rt部分将显示在表达式上方。

下面这个例子中，拼音将显示在文字的上方。

<ruby>
    北<rt>bei</rt>
    京<rt>jing</rt>
</ruby>

但是在不支持ruby的浏览器中需要使用rp对这两个区块进行视觉上的隔离。

<ruby>
    北
    <rp>
        <rt>bei</rt>
    </rp>
    京
    <rp>
        <rt>jing</rt>
    </rp>
</ruby>

19，time

为了将现在的常用的日期和时间语句用规范的、利于机器识别的格式进行表述，time元素提供了一个可选的时间和时区组件。

为了确保机器能够正确识别，我们可以使用datetime属性，其属性值可以被定义为时间、日期或者这两者的复合体。

<time datetime="2017-07-03">

还可以使用pubdate为一个网页指定发布时间。

<time datetime="2017-07-03" pubdate>
<!--以下两种形式也可以行-->
<time datetime="2017-07-03" pubdate="">
<time datetime="2017-07-03" pubdate="pubdate">

20，mark

mark元素用于高亮标记一段文字。

可以使用mark元素来标记出网页里被搜索的关键词或是用于高亮显示一段解释性的代码。

21，wbr

wbr元素用于让浏览器为长单词增加可选择的破折号，以便自动拆行。

在相当长的单词中插入一对wbr元素，可以让浏览器根据排版的需要决定是否将单词换行。破折号是否出现，以及出现的位置完全由排版决定。wbr只是允许自动拆行，但非强制拆行。

参考：
https://www.cnblogs.com/fliu/articles/5244866.html
https://www.cnblogs.com/hedawei/p/6376087.html
https://www.imooc.com/article/27304?block_id=tuijian_wz