HTML5语义化标签的理解

语义化标签的好处要从HTML 全局属性说起，即有的标签有默认的HTML全局属性，所以最好用语义化标签。
引入语义化标签的好处主要有下列三点：

比div标签有更加丰富的含义，方便开发与维护
搜索引擎能更方便的识别页面的每个部分
方便其他设备解析（如移动设备、盲人阅读器等）

1：以下元素支持 tabindex 属性：

<a>, <area>, <button>, <input>, <object>, <select> 以及 <textarea>。

用法：number规定元素的 tab 键控制次序（1 是第一个）。
作用：增强用户键盘的可操作性，所以不要用div代替
2：以下元素支持 accesskey 属性：

<a>, <area>, <button>, <input>, <label>, <legend> 以及 <textarea>。

用法：character规定激活（使元素获得焦点）元素的便捷按键。
作用：增强用户键盘的可操作性，所以不要用div代替

3：contextmenu 属性的值是要打开的 menu 元素的 id。目前只有火狐支持

4：spellcheck 属性规定是否对元素进行拼写和语法检查。可以对以下内容进行拼写检查：

input 元素中的文本值（非密码）       
<textarea> 元素中的文本       
可编辑元素中的文本

5：lang 属性在以下标签中无效：

<base>, <br>, <frame>, <frameset>, <hr>, <iframe>, <param> 以及 <script>。

对外的意义：有利于SEO的！！有利于解析代码！！可读性可维护性增强！！

1：定义上的：

<!--...-->   定义注释。
<!DOCTYPE>  定义文档类型。
<html>      定义 HTML 文档。
<body>     定义文档的主体。
<script>     定义客户端脚本。
<frame>     定义框架集的窗口或框架。
<frameset>     定义框架集。
<head>     定义关于文档的信息。
<iframe>     定义内联框架。
<meta>      定义关于 HTML 文档的元信息。
<link>      定义文档与外部资源的关系。
<noframes>    定义针对不支持框架的用户的替代内容。
<noscript>    定义针对不支持客户端脚本的用户的替代内容。

2：功能上的（js或者css上的作用比较有特色的语义化标签）：

<a>           定义锚。
<abbr>      定义缩写。
<address>   定义文档作者或拥有者的联系信息。
<area>       定义图像映射内部的区域。
<audio>     定义声音内容。
<base>      定义页面中所有链接的默认地址或默认目标。
<br>         定义简单的折行。
<button>    定义按钮 (push button)。
<col>       定义表格中一个或多个列的属性值。
<colgroup>   定义表格中供格式化的列组。
<dfn>        定义一个定义项目。
<code>     定义计算机代码文本。
<samp>     定义样本文本。
<kbd>       定义键盘文本。它表示文本是从键盘上键入的。它经常用在与计算机相关的文档或手册中。
<var>       定义变量。您可以将此标签与 <pre> 及 <code> 标签配合使用。
<cite>       定义引用。可使用该标签对参考文献的引用进行定义，比如书籍或杂志的标题。
<datalist>  定义下拉列表。 
<wbr>      定义长单词在哪里换号；元素来添加 Word Break Opportunity（单词换行时机）
<video>     定义视频。
<track>      标签为诸如 video 元素之类的媒介规定外部文本轨道。
<title>       定义文档的标题。
<time>        定义日期/时间。
<textarea>    定义多行的文本输入控件。
<strong>    定义强调文本。
<style>     定义文档的样式信息。
<sub>       定义下标文本。
<summary>    有关文档的详细信息 
<details>    元素定义可见的标题。
<sup>        定义上标文本。
<source>     定义媒介源。
<samp>      定义计算机代码样本。
<section>    定义 section。
<select>     定义选择列表（下拉列表）。
<rt>       定义 ruby 注释的解释。
<ruby>      定义 ruby 注释。
<q>         定义短的引用。
<progress>    定义任何类型的任务的进度。
<param>      定义对象的参数。
<pre>        定义预格式文本。
<optgroup>    定义选择列表中相关选项的组合。
<option>     定义选择列表中的选项。
<output>     定义输出的一些类型。
<details>     定义元素的细节。
<dir>       不赞成使用。定义目录列表。
<div>      定义文档中的节。
<dfn>       定义定义项目。
<dialog>     定义对话框或窗口。
<dl>      定义定义列表。
<dt>       定义定义列表中的项目。
<embed>     定义外部交互内容或插件。
<fieldset>    定义围绕表单中元素的边框。
<figcaption>    定义 figure 元素的标题。
<figure>    定义媒介内容的分组，以及它们的标题。
<form>   定义供用户输入的 HTML 表单。
<hr>     定义水平线。
<img>     定义图像。
<input>     定义输入控件。
<ins>     定义被插入文本。
<kbd>     定义键盘文本。
<keygen>     定义生成密钥。
<label>     定义 input 元素的标注。
<legend>     定义 fieldset 元素的标题。
<map>     定义图像映射。
<mark>     定义有记号的文本。
<menu>     定义命令的列表或菜单。
<menuitem>     定义用户可以从弹出菜单调用的命令/菜单项目。
<meter>     定义预定义范围内的度量。
<nav>      定义导航链接。
<object>      定义内嵌对象。

3：结构上的（方便分块查看，这个很重要）：结构上的可以被其他div+css代替但是好的前端会用这些标签来使代码可读性增强。

<header>      定义 section 或 page 的页眉。
<dd>        定义定义列表中项目的描述。
<article>    定义文章。
<aside>      定义页面内容之外的内容。尤其上面的四位主要用于划分页面块，一般不做样式处理
<p>         定义段落。
<em>       把文本定义为强调的内容。
<strong>    把文本定义为语气更强的强调的内容。
<bdo>       定义文字方向。
<bdi>        定义文本的文本方向，使其脱离其周围文本的方向设置，与bdo配合使用试试。
<big>        定义大号文本。
<b>           定义粗体字。
<del>       定义被删除文本。
<ul>        定义无序列表。
<ol>        定义有序列表。
<table>    定义表格。
<tbody>      定义表格中的主体内容。
<td>       定义表格中的单元。
<tfoot>    定义表格中的表注内容（脚注）。
<th>      定义表格中的表头单元格。
<thead>      定义表格中的表头内容。
<tr>      定义表格中的行。
<footer>     定义 section 或 page 的页脚。
<h1> to <h6>    定义 HTML 标题。
<i>      定义斜体字。
<li>     定义列表的项目。