#語義化
---
沒有 ```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)。
