說語義標簽前先來理解下什么叫語義化,當下html是靠div+css來鑄造頁面的整體框架和結構的,通篇大量的div可讀性極低,因此誕生了這些特殊的標簽,簡單地說就是見名知義,使頁面更清晰,方便維護和開發。
HTML5為我們提供了一系列的語義標簽。
1、<section></section>
定義文檔中的主體部分的節、段。
2、<article></article>
一個特殊的section標簽,比section有更明確的語義。定義來自外部的一個獨立的、完整的內容塊,例如什么論壇的文章,博客的文本。。。
3、<aside></aside>
用來裝載頁面中非正文的內容,獨立於其他模塊。例如廣告、成組的鏈接、側邊欄。。。
4、<header></header>
定義文檔、頁面的頁眉。通常是一些引導和導航信息,不局限於整個頁面頭部,也可以用在內容里。
5、<footer></footer>
定義了文檔、頁面的頁腳,和header類似。
6、<nav></nav>
定義了一個鏈接組組成的導航部分,其中的鏈接可以鏈接到其他網頁或者當前頁面的其他部分。
7、<hgroup></hgroup>
用於對網頁或區段(section)的標題元素(h1~h6)進行組合。
8、<figure></figure>
用於對元素進行組合。
9、<figcaption></figcaption>
為figure元素加標題。一般放在figure第一個子元素或者最后一個。
10、<details></details>
定義元素的細節,用戶可以點擊查看或者隱藏。
11、<summary></summary>
和details連用,用來包含details的標題。
12、<canvas></canvas>
用來進行canvas繪圖。
13、<video></video>
定義視頻。
14、<audio></audio>
定義音頻。
15、<embed></embed>
定義嵌入網頁的內容。比如插件。
16、<source></source>
該標簽為媒介元素(比如video、audio)定義媒介元素。
17、<datalist id='dl'></datalist>
定義可選數據的列表,與input配合使用(<input list='dl'>)可制作輸入值的下拉列表。
18、<mark></mark>
在視覺上向用戶展現出那些想要突出的文字。比如搜索結果中向用戶高亮顯示搜索關鍵詞。
19、<meter [min/max/low/high/optimum/value]></meter>
度量衡,用紅黃綠表示出一個數值所在范圍。
20、<output></output>
定義不同類型的輸出,樣式與span無異。
21、<progress></progress>
進度條,運行中的進度。
22、<time></time>
定義日期或者時間。
23、<keygen></keygen>
定義加密內容。
24、<command></command>
定義命令行為。