H5新增了很多標籤，也更加語義化了，但是除了header、footer、nav等，其他的還真的沒有去了解過，今天整理一下H5新增的語義化標籤。

Header：

   不用多說，就是定義頭部，可以多個。

Footer：

   底部，不一定是文件最底部，可以多個。

Nav：

   導航欄標籤，定義導航欄。

Article：

   獨立內容區域，與session類似，用於文章等。

Aside：

   頁面側邊欄所使用。

Time:

   時間標籤，主要用於搜尋引擎和其它一些內容引擎特殊的解析和展示。

Ruby：

   註釋標籤，跟rt和rp一起使用，可以看一下效果
 

<ruby>
張 <rt>Zhang</rt><rp>不顯示</rp>
</ruby>

Details：

   點選展開詳情，可以試一下，可能在很多場景下可以使用

<details>
<summary>更多</summary>
<p>詳細內容</p>
</details>

Mark:

   會給這個欄位新增一個背景色，那個顏色還改不了。

Progress：

   進度條，當做簡易進度條使用，不夠美觀。

<progress value="50" max="100"></progress>

Section：

   節的意思，主要是區分開內容，文件中的節或者是文章的節。

Video：

   視訊，現在大部分不支援自動播放了，微信能處理，其他還沒見過能自動播放。

Audio：

   音訊，也就是音樂，也不支援自動播放。

Datalist:

   強烈推薦，在我看來就是模糊查詢，除了樣式之外，非常好用。

<input type="text" list="carsd">
<datalist id="carsd">
  <option value="wf"></option>
  <option value="wg"></option>
  <option value="dre"></option>
  <option value="sdhjfgh"></option>
  <option value="dfgsdw"></option>
  <option value="fdgwfdg"></option>
  <option value="dfgtyr"></option>
  <option value="dfgwdfg"></option>
</datalist>
 

Embed：

   插入多媒體內容，小小試了試，可以播放視訊，但是那些屬性都不生效。待研究。

Canvas：

   畫布，很強大很強大，值得研究。

Main：

   主要內容。

H5還有另外一些標籤，比如bdi、command、figcaption等等，可以在http://www.w3school.com.cn/html5/html5_reference.asp這個地址檢視新增的標籤。

其實這些語義化標籤有些在使用上可能沒什麼特別，但是這些標籤提升了可訪問性和SEO的優化，還有利於維護性，對於一些機器的解析也有很大優點。