#语义化
---
没有 ```CSS``` 的 ```HTML``` 是一个语义系统而不是 UI 系统。
使用语义化的标签能提高网页的可读性，减少浏览器 BUG 的产生，减少 CSS 选择器的代码量，并能为搜索引擎优化。 当网页的样式不可用时，也能保证基本的可读性。 应根据内容形式而不是效果样式来定义标签： 不得通篇使用 div 标签 ，但也不要滥用 dl/dt/dd/ul/ol/li 标签（它们应该仅用于列表）。 为表格化数据使用```<table>```标签。
此外语义化的 ```HTML``` 结构，有助于机器（搜索引擎）理解，另一方面多人协作时，能迅速了解开发者意图。
常用 HTML 标签使用如下：
| <center>标签</center> | <center>用途</center> |
| -- | -- |
| div | 主要用于布局、排版和分割页面的结构 |
|span| 没有特殊的意义，可以用作排版的辅助，然后在 CSS 中定义 span|
|ul|无序列表|
|ol|有序列表|
|li |列表项目|
|dl |定义列表|
|dt |定义列表的标题|
|dd| 定义列表的描述|
|h1-h6 |标题（ 根据重要性依次递减， h1 是最重要的标题）|
|p |段落文字|
|img |图片内容|
|q |引用|
|a |链接|
|input |按钮、输入框、单选框等|
|blockquote |大段引用|
|cite |一般引用|
|b |为样式加粗而加粗|
|strong |为强调内容而加粗|
|i |为样式倾斜而倾斜|
|em |为强调内容而倾斜|
|code |代码标识|
|abbr |缩写|
|address |地址|
常用 HTML5 标签使用如下：
| <center>标签</center> | <center>用途</center> |
| -- | -- |
|section |模块|
|header |页头、模块头|
|footer |页尾、模块尾|
|nav |导航栏|
|menu |菜单|
|article |文档、内容|
|aside |边栏|
|canvas |画布（用于绘制图形）|
```
灵活的利用 HTML5 标签可以减少 class 的使用，减少文件体积，使 HTML 代码看起来更清晰明了。
注意：页面中用作链接的按钮应使用 <a> 标签。表单中的按钮应使用<input>标签而不是<button>标签。
```
###示例
将你构建的页面当作一本书，将标签的语义对应的其功能和含义:
* 书的名称：```<h1>```
* 书的每个章节标题: ```<h2>```
* 章节内的文章标题: ```<h3>```
* 小标题/副标题: ```<h4> <h5> <h6>```
* 章节的段落: ```<p>```
> 为SEO考虑，慎用 H1 和 H2 标签。
更多语义化的内容，参考 sofish 写的文章 [这样去写你的 HTML](http://wenku.baidu.com/view/0a8d3774f242336c1eb95ea9.html)。
