HTML 标签语义化规范文档

sheep

HTML 标签语义化
一，什么是 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>，其他的时候都用<article>。
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>“我们大部分人都有深刻体验，每当主流浏览器版本的升级，我们刚建立的网站就可能
变得过时，我们就需要升级或者重新建造一遍网站。
例如 1996-1999 年典型的"浏览器大战"，为了兼容 Netscape 和 IE，网站不得不为这两种浏览器写不
同的代码。
同样的，每当新的网络技术和交互设备的出现，我们也需要制作一个新版本来支持这种新技术或新设备，
例如支持手机上网的 WAP 技术。
类似的问题举不胜举：网站代码臃肿、繁杂浪费了我们大量的带宽；针对某种浏览器的 DHTML 特效，
屏蔽了部分潜在的客户；
不易用的代码，残障人士无法浏览网站等等。这是一种恶性循环，是一种巨大的浪费。”
</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 元素来标记出网页里被搜索的关键词或是用于高亮显示一段解
释性的代码。补充参考：
https://www.w3school.com.cn/html/html5_semantic_elements.asp
https://developer.mozilla.org/en-US/docs/Web/HTML/Element