html語義化

什麼是html語義化

根據內容的結構化（內容語義化），選擇合適的標籤（程式碼語義化）便於開發者閱讀和寫出更優雅的程式碼的同時讓瀏覽器的爬蟲和機器很好地解析。

html語義化的好處

• 易於使用者閱讀，樣式丟失的時候能讓頁面呈現清晰的結構。
• 有利於SEO，搜尋引擎根據標籤來確定上下文和各個關鍵字的權重。
• 可以提升使用者體驗，給使用者多一些解釋/提示資訊。
• 方便其他裝置解析，如盲人閱讀器根據語義渲染網頁
• 便於團隊開發和維護，語義化更具可讀性，程式碼更好維護，與CSS3關係更和諧。

主體結構標籤，示例如圖：

各個標籤的介紹

1、 header

header 定義文件或者文件的部分割槽域的頁首，應作為介紹內容或者導航連結欄的容器。

在一個文件中:

• 可以定義多個 header 元素；
• header 元素不能作為 address 、 footer 或 header 元素的子元素；
• 可以是“網頁”或任意“section”的頭部部分；
• 如果hgroup或h1-h6自己就能工作的很好，那就不要用header。

2、 nav

nav 描述一個含有多個超連結的區域，該區域包含跳轉到其他頁面或頁面內部其他部分的連結列表。

主要用於定義頁面的主要導航部分。

在一個文件中

• 可定義多個 nav 元素。
• 用在整個頁面主要導航部分上
• 不合適就不要用nav元素；

3、 main

main 定義文件的主要內容，該內容在文件中應當是獨一無二的，不包含任何在文件中重複的內容，比如側邊欄，導航欄連結，版權資訊，網站logo，搜尋框（除非搜尋框作為文件的主要功能）。

主要用於定義頁面的主要內容部分。

在一個文件中

• 不能出現多個 main 標籤。

4、 article

article 元素表示文件、頁面、應用或網站中的獨立結構，是可獨立分配的、可複用的結構，如在釋出中，它可能是論壇帖子、雜誌或新聞文章、部落格、使用者提交的評論、互動式元件，或者其他獨立的內容專案。

當 article 元素巢狀使用時，則該元素代表與外層元素有關的文章。

article代表一個在文件，頁面或者網站中自成一體的內容，目的是為了讓開發者獨立開發或重用。

例如，論壇的帖子，部落格上的文章，一篇使用者的評論，一個互動的widget小工具。

如果在article內部再巢狀article，那就代表內嵌的article是與它外部的內容有關聯的。

一定要區分article、section、div

• 自身獨立的情況下：用article
• 是相關內容：用section
• 沒有語義的：用div

5、 aside

aside 元素表示一個和其餘頁面內容幾乎無關的部分，被認為是獨立於該內容的一部分且可以被單獨的拆分出來而不會影響整體。

通常表現為側邊欄或嵌入內容。

當做特殊的section來使用。

• aside在article內表示主要內容的附屬資訊，
• 在article之外則可做側邊欄，沒有article與之對應，最好不用。
• 如果是廣告，其他日誌連結或者其他分類導航也可以用

6、 footer

footer 定義最近一個章節內容或者根節點元素的頁尾。一個頁尾通常包含該章節作者、版權資料或者與文件相關的連結等資訊。

使用footer插入聯絡資訊時，應在 footer 元素內使用 address 元素。

• 可以是“網頁”或任意“section”的底部部分；
• 沒有個數限制，除了包裹的內容不一樣，其他跟header類似。
• 不能包含 footer 或者 header

7、 section

section 表示文件中的一個區域（或節），比如，內容中的一個專題組。

如果元素內容可以分為幾個部分的話，應該使用 article 而不是 section 。

不要把 section 元素作為一個普通的容器來使用，特別是當 section 僅僅是為了美化樣式或方便指令碼使用的時候，應使用 div 。

為了防止混淆 ** article ** 比 section 更具有獨立性、完整性。可通過 該段內容脫離了所在的語境，是否完整、獨立 來判斷。

• 表示文件中的節或者段；
• article、nav、aside可以理解為特殊的section；
• 如果可以用article、nav、aside就不要用section;
• 沒實際意義的就用div

其他結構元素標籤

h1-h6

h1-h6因為hgroup，section和article的出現，h1-h6定義也發生了變化，允許一張頁面出現多個h1。

address

address代表區塊容器，必須是作為聯絡資訊出現，郵編地址、郵件地址等等,一般出現在footer。