一、HTML5語義化標籤
| 標籤 | 描述 |
|---|---|
| <article> | 頁面獨立的內容區域。 |
| <aside> | 頁面的側邊欄內容。 |
| <bdi> | 允許您設定一段文字，使其脫離其父元素的文字方向設定。 |
| <command> | 命令按鈕，比如單選按鈕、核取方塊或按鈕 |
| <details> | 用於描述文件或文件某個部分的細節 |
| <dialog> | 對話方塊，比如提示框 |
| <summary> | 標籤包含 details 元素的標題 |
| <figure> | 規定獨立的流內容（影像、圖表、照片、程式碼等等）。 |
| <figcaption> | <figure> 元素的標題 |
| <footer> | section 或 document 的頁尾。 |
| <header> | 文件的頭部區域 |
| <mark> | 帶有記號的文字。 |
| <meter> | 度量衡。僅用於已知最大和最小值的度量。 |
| <nav> | 導航連結的部分。 |
| <progress> | 任何型別的任務的進度。 |
| <ruby> | ruby 註釋（中文注音或字元）。 |
| <rt> | 字元（中文注音或字元）的解釋或發音。 |
| <rp> | 在 ruby 註釋中使用，不支援 ruby 元素的瀏覽器所顯示的內容。 |
| <section> | 文件中的節（section、區段）。 |
| <time> | 日期或時間。 |
| <wbr> | 規定在文字中的何處適合新增換行符。 |
二、語義化標籤的使用
2.1 <title></title> 頁面主要內容
（1）<title> 標籤的特點是簡短、描述性、唯一，用於提升搜尋引擎排名。
（2）搜尋引擎會把 title 作為判斷頁面主要內容的指標，有效的 title 應該包含幾個與頁面內容密切相關的關鍵字，建議將 title 的核心內容寫在前 60 個字元。
2.2 <header></header> 頁首
（1）HTML5 規範描述為“一組解釋性或導航型性的條目”，通常有網站標誌、主導航、全站連結以及搜尋框。
2.3 <nav></nav> 導航
（1）頁面的導航連結區域，用於定義頁面的主要導航部分。
（2）導航通常使用 <ul> 無序列表。若是麵包屑連結，則使用 <ol> 有序列表。
（3）HTML5 規範不推薦對輔助頁尾連結使用 nav，除非頁尾再次顯示頂級全域性導航、或者是招聘資訊等重要連結。
2.4 <main></main> 主要內容
（1）網站頁面的主要內容，並且一個頁面只能使用一次 <main> 標籤。
（2）若是 web 應用，則包含其主要功能。
2.5 <article></article> 文章標記
（1）表示的是一個文件、頁面、應用或是網站中的一個獨立的容器。
（2）HTML5 規範宣告 <article> 標籤適用於自包含的視窗小部件:股票行情，計算器，鐘錶，天氣視窗小部件等。
（3）<article>這個標籤可以巢狀使用，但是他們必須是部分與整體的關係。
2.6 <section></section> 區塊
（1）一組相似主題的內容，一般會有一個標題。
（2）實現比如文章的章節，標籤式對話方塊中的各種標籤頁等功能。
2.7 <aside></aside> 側邊欄
（1）表示一部分內容與頁面的主體並沒有較大的關係，並且可以獨立存在。
（2）實現比如升式引用、側邊欄、相關文章的連結、廣告、友情連結等功能。
2.8 <footer></footer> 頁尾
（1）和 <header> 標籤對應，可以實現比如附錄、索引、版權頁、許可協議等功能。
2.9 <cite></cite> 引用
（1）表示它所包含的文字對某個參考文獻的引用，比如書籍或者雜誌的標題。
（2）按照慣例，引用的文字將以斜體顯示。
（3）用 <cite> 標籤把指向其他文件的引用分離出來，尤其是分離那些傳統媒體中的文件，如書籍、雜誌、期刊，等等。
2.10 <blockquote></blockquote> 塊引用
（1）<blockquote> 與 </blockquote> 之間的所有文字都會從常規文字中分離出來，經常會在左、右兩邊進行縮排（增加外邊距），而且有時會使用斜體。也就是說，塊引用擁有它們自己的空間。
2.11 <q></q> 短的引用
（1）瀏覽器經常在引用的內容周圍新增引號。
（2）根據 HTML 4.01 規範，q 元素應當使用分界引號來呈現，就是說，q 元素包含的文字必須以引號來開始和結束。
2.12 <time></time> 日期或時間
（1）如果未定義 datetime 屬性，則必須在元素的內容中規定日期或時間。
2.13 <abbr></abbr> 簡稱或縮寫
（1）通過對縮寫進行標記，您能夠為瀏覽器、拼寫檢查和搜尋引擎提供有用的資訊。
（2）可以在 <abbr> 標籤中使用全域性的 title 屬性，這樣就能夠在滑鼠指標移動到 <abbr> 元素上時顯示出簡稱/縮寫的完整版本。
2.14 <dfn></dfn> 特殊術語或短語的定義
（1）現在流行的瀏覽器通常用斜體來顯示 <dfn> 中的文字。
（2）與其他許多基於內容的樣式和物理樣式標籤一樣，<dfn> 標籤儘量少用為妙。
2.15 <del></del> 刪除的文字
（1）和 <ins> 標籤配合使用，來描述文件中的更新和修正。
2.16 <ins></ins> 插入文字
2.17 <code></code> 原始碼
（1）用於表示計算機原始碼或者其他機器可以閱讀的文字內容。
2.18 <pre></pre> 預格式化的文字
（1）被包圍在 pre 元素中的文字通常會保留空格和換行符。而文字也會呈現為等寬字型。
（2）若使用 <pre> 標籤來定義計算機原始碼，比如 HTML 原始碼，則使用符號實體來表示特殊字元，比如 “<” 代表 “<“，”>” 代表 “>”，”&” 代表 “&”。
（3）可以導致段落斷開的標籤（例如標題、<p> 和 <address> 標籤）絕不能包含在 <pre> 所定義的塊裡。儘管有些瀏覽器會把段落結束標籤解釋為簡單地換行，但是這種行為在所有瀏覽器上並不都是一樣的。
（4）pre 元素中允許的文字可以包括物理樣式和基於內容的樣式變化，還有連結、影像和水平分隔線。