HTML5頁結構基礎知識

HTML5語義化元素詳解及頁面結構構建指南

核心要點

• HTML5 引入新的語義化元素來增強文檔結構的意義，例如 header、section、article、nav、aside 和 footer 元素。這些元素可以用來劃分頁面，並明確內容的目的。
• header 元素不僅用於頁面標題，還可以介紹內容的每個部分。 section 元素表示內容的主題分組，通常帶有標題。 article 元素表示文檔中一個完整、獨立的組成部分，可以獨立存在。
• nav 元素表示一組導航鏈接，應保留用於主要導航。 aside 元素表示頁面的一部分，與周圍的內容間接相關，可以被認為與該內容分離。
• footer 元素表示其最近祖先內容部分的頁腳。它通常包含版權信息、相關鏈接列表、作者信息以及您通常認為位於內容塊末尾的類似信息。

(以下摘錄自Alexis Goldstein、Louis Lazaris 和Estelle Weyl 合著的書籍《HTML5 & CSS3 for the Real World, 2nd Edition》。該書在全球各地的商店有售，您也可以在這裡購買電子書版本。)

在分解了模板的基礎知識之後，讓我們開始為頁面添加一些內容並構建其結構。

本書後面將專門介紹添加 CSS3 功能和其他 HTML5 元素；目前，我們將考慮在構建網站整體佈局時要使用的元素。在本節和接下來的章節中，我們將廣泛介紹語義化。當我們使用術語“語義化”時，指的是給定的 HTML 元素描述其內容含義的方式。

如果您回顧一下《The HTML5 Herald》的屏幕截圖（或在線查看該網站），您會看到它被劃分為以下部分：

• 帶有徽標和標題的 header 部分
• 導航欄
• 分為三列的主體內容
• 列中的文章和廣告塊
• 包含一些作者和版權信息的頁腳

在我們確定哪些元素適合頁面的這些不同部分之前，讓我們考慮一些選擇。首先，我們將向您介紹一些新的 HTML5 語義化元素，這些元素可用於幫助劃分頁面並為文檔結構添加更多含義。

header 元素

自然地，我們將首先關注 header 元素。規範簡潔地將其描述為“一組介紹性或導航輔助工具”。

與您通常假設的相反，您可以包含一個新的 header 元素來介紹內容的每個部分。它不僅限於頁面 header（您通常可能使用 <div> 來標記）。當我們在這裡使用“section”一詞時，我們並不局限於下一部分中描述的實際 section 元素；從技術上講，我們指的是 HTML5 所稱的“sectioning content”。這意味著任何可能需要自己 header 的內容塊，即使這意味著在一個頁面上有多個這樣的塊。 header 元素可用於包含特定於頁面的任何單個部分的介紹性內容或導航輔助工具，或應用於整個頁面，或兩者兼而有之。 <p>雖然 header 元素通常放置在頁面或部分的頂部，但其定義與其位置無關。您的網站佈局可能要求文章或博客文章的標題位於內容的左側、右側甚至下方；無論哪種情況，您仍然可以使用 header 來描述此內容。 </p> <p><strong>section 元素</strong></p> <p>您應該熟悉的下一個元素是 HTML5 的 section 元素。規範將 section 定義如下：</p> <blockquote> <p>section 元素表示文檔或應用程序的通用部分。在此上下文中，section 是內容的主題分組，通常帶有標題。 </p> </blockquote> <p>它進一步解釋說，section 不應作為僅用於樣式或腳本目的的通用容器使用。如果您無法將 section 用作通用容器（例如，為了實現所需的 CSS 佈局），那麼您應該使用什麼？我們的老朋友 div 元素，它在語義上毫無意義。 </p> <p>回到規範中的定義，section 元素的內容應該是“主題性的”，因此以通用方式使用它來包裝不相關的部分內容是不正確的。 </p> <p>section 元素的可接受用途的一些示例包括：</p> <ul> <li>選項卡式界面的各個部分</li> <li>“關於”頁面的部分；例如，公司的“關於”頁面可能包含關於公司歷史、使命聲明和團隊的部分</li> <li>漫長的“服務條款”頁面的不同部分</li> <li>在線新聞網站的各個部分；例如，文章可以分組到涵蓋體育、國際事務和經濟新聞的部分</li> </ul> <p><strong>注意：正確使用 section</strong></p> <p>每次向網頁設計師提供新的語義標記時，都會就這些元素的正確使用、規範的意圖等等進行討論。您可能還記得以前 HTML 規範中關於 dl 元素的適當用法的討論。不出所料，HTML5 也沒有倖免於此現象，尤其是在 section 元素方面。即使是備受尊敬的 HTML5 權威人士 Bruce Lawson 也承認過去曾錯誤地使用過 section。為了更清楚地了解，非常值得閱讀 Bruce 的文章，其中解釋了他的錯誤。 </p> <p>簡而言之：</p> <ul> <li>section 是<em>通用的</em>，因此如果更具體的語義元素適用（例如 article、aside 或 nav），請改用該元素。 </li> <li>section <em>具有語義含義</em>；這意味著它包含的內容在某種程度上是相關的。如果您無法僅使用幾個詞來簡潔地描述您試圖放入 section 的所有內容，則您可能需要一個語義上中性的容器：不起眼的 div。 </li> </ul> <p>也就是說，與語義一樣，在某些情況下它可以解釋。如果您覺得您可以說明為什麼使用給定的元素而不是另一個元素，請繼續。如果有人真的就此批評您，由此產生的討論對於所有參與者來說既有趣又有益，甚至可能有助於更廣泛的社區理解規範。 </p> <p>還要記住，如果合適，您可以將 section 元素嵌套到現有的 section 元素中。例如，對於在線新聞網站，世界新聞部分可以進一步細分為每個主要全球區域的部分。 </p> <p><strong>article 元素</strong></p> <p>article 元素類似於 section 元素，但有一些顯著的區別。以下是規範中的定義：</p> <blockquote> <p>article 元素表示文檔、頁面、應用程序或站點中完整或獨立的組成部分，原則上可以獨立分發或重複使用，例如在聯合發布中。 </p> </blockquote> <p>該定義中的關鍵詞是<em>獨立的組成部分</em>和<em>獨立分發</em>。雖然 section 可以包含任何可以按主題分組的內容，但 article 必須是能夠獨立存在的單個內容。這種區別可能難以理解，因此如有疑問，請嘗試聯合發布測試：如果可以將內容在另一個網站上重新發布而無需修改，或者如果可以通過RSS 或社交媒體網站（如Twitter 或Facebook）將其推送為更新，則它具有article 的特徵。 </p> <p>最終，由您決定什麼構成 article，但以下是一些符合規範中建議的建議：</p> <ul> <li>論壇帖子</li> <li>雜誌或報紙文章</li> <li>博客文章</li> <li>用戶提交的博客文章或文章的評論</li> </ul> <p>最後，就像 section 元素一樣，article 元素可以嵌套在其他 article 元素中。您還可以將 section 嵌套在 article 中，反之亦然。這完全取決於您要標記的內容。 </p> <p><strong>nav 元素</strong></p> <p>可以肯定的是，nav 元素幾乎會在每個項目中出現。 nav 正如其含義所表示的那樣：一組導航鏈接。雖然 nav 的最常見用途是包裝鏈接的無序列表，但還有其他選擇。例如，您可以將 nav 元素包裝在一個包含頁面或頁面部分的主要導航鏈接的文本段落周圍。 </p> <p>無論哪種情況，nav 元素都應保留用於最重要的導航。因此，建議您避免將 nav 用於頁腳中的簡短鏈接列表，例如。 </p> <p><strong>注意：跳過導航鏈接</strong></p> <p>您可能在許多網站上看到實現的一種設計模式是“跳過導航”鏈接。其目的是允許屏幕閱讀器用戶快速跳過網站的主要導航，如果他們已經聽到過它——畢竟，每次點擊到新頁面時都沒有必要收聽大型網站的整個導航菜單！ nav 元素有可能消除這種需要；如果屏幕閱讀器看到 nav 元素，它可以允許其用戶跳過導航，而無需額外的鏈接。規範指出：“針對可以受益於在初始渲染中省略導航信息或可以受益於立即提供導航信息的用戶（例如屏幕閱讀器）的用戶代理可以使用此元素來確定頁面上最初要跳過或按需提供（或兩者兼而有之）的內容。”</p> <p>儘管並非所有輔助設備都識別 nav，但通過現在構建標準，您可以確保隨著屏幕閱讀器的改進，您的頁面將隨著時間的推移變得更易於訪問。 </p> <p><strong>注意：用戶代理</strong></p> <p>在瀏覽規範時，您會經常遇到“用戶代理”一詞。實際上，它只是瀏覽器的一個花哨術語——用戶用來訪問頁面內容的軟件“代理”。規範不簡單地說“瀏覽器”的原因是用戶代理可以包括屏幕閱讀器或任何其他讀取網頁的技術手段。 </p> <p>您可以在給定頁面上多次使用 nav。如果您有網站的主要導航欄，則需要一個 nav 元素。此外，如果您有一組指向當前頁面不同部分的輔助鏈接（使用頁面內錨點或“本地”鏈接），這也可以包裝在 nav 元素中。 </p> <p>與 section 一樣，關於什麼構成 nav 的可接受用途以及為什麼在某些情況下不推薦它（例如在頁腳中）存在一些爭論。一些開發人員認為此元素適用於分頁或麵包屑鏈接，或者對於構成網站主要導航方式的搜索表單（如 Google 上的情況）。 </p> <p>這個決定最終取決於您，開發人員。 WHATWG 的 HTML5 規範的主要編輯 Ian Hickson 直接回答了這個問題：“在您本來會使用 class=nav 的任何時候使用它”。 <sup>[7]</sup></p> <p><strong>aside 元素</strong></p> <p>此元素表示頁面的一部分，“與 aside 元素周圍的內容間接相關，可以被認為與該內容分離”。 </p> <p>aside 元素可用於包裝與以下內容間接相關的內容部分：</p> <ul> <li>特定的獨立內容（例如文章或部分）。 </li> <li>整個頁面或文檔，這在向頁面或網站添加側邊欄時通常會這樣做。 </li> </ul> <p>aside 元素絕不應用於包裝屬於主要內容的頁面部分；換句話說，aside 不是指從句。 aside 內容可以獨立存在，但它仍然應該是更大整體的一部分。 </p> <p>aside 的一些可能用途包括側邊欄、輔助鏈接列表或廣告塊。還應注意，aside 元素（與 header 一樣）並非由其在頁面上的位置定義。它可能位於側面，也可能位於其他位置。定義它的內容本身及其與其他元素的關係。 </p> <p><strong>footer 元素</strong></p> <p>本章將討論的最後一個元素是 footer 元素。與 header 一樣，您可以在單個頁面上有多個 footer 元素，並且您應該使用 footer 而不是通用的東西，例如 <code><div>。根據規範，footer 元素表示其最近祖先內容部分的頁腳。內容部分可以是整個文檔，也可以是 section、article 或 aside 元素。 <p>footer 通常包含版權信息、相關鏈接列表、作者信息以及您通常認為位於內容塊末尾的類似信息；但是，與aside 和header 一樣，footer 元素並非按其在頁面上的位置定義，因此它不必出現在部分的末尾或頁面的底部。很可能它會，但這並非必需。例如，關於博客文章作者的信息可能顯示在文章上方而不是下方，並且仍然被認為是頁腳信息。 </p> <p><strong>注意：我們是如何走到這一步的？ </strong></p> <p>如果您對 HTML5 的路徑以及我們最終獲得的標籤有些疑問，您可能想查看 Luke Stevens 的書《The Truth about HTML5》。 Luke 的書目前已出版第二版，內容有些爭議。除了涵蓋許多HTML5 技術（如視頻和畫布）之外，他還深入介紹了HTML5 的歷史，解釋了新元素中固有的某些語義和可訪問性問題，並提供了一些關於如何處理這些問題的建議。 </p> <hr> <p><sup>[7]</sup> 請參閱 <a href="https://www.php.cn/link/729db3e07a09db3a41dc1734e04ce44e">https://www.php.cn/link/729db3e07a09db3a41dc1734e04ce44e</a>。 </p> <p><strong>HTML5 頁面結構常見問題解答 (FAQ)</strong></p> <h3>HTML5 中聲明的意義是什麼？ </h3> <p>聲明是 HTML5 文檔的第一行。它不是 HTML 標籤；而是一個關於頁面使用哪個版本的 HTML 編寫的指令。在 HTML5 中，聲明簡化為 <code><!DOCTYPE html>。這有助於確保瀏覽器以標準模式呈現頁面，該模式支持最新的 HTML 規範。

元素如何在 HTML5 文檔中發揮作用？

元素是元數據（關於數據的數據）的容器，位於 標籤和 標籤之間。元數據不會顯示在頁面上，但可以由機器解析。它通常定義文檔標題、字符集、樣式、腳本和其他元信息。 元素的內容可以包括 <title></title>、<meta>、<link>、<style></style> 和 <base> 等元素。

HTML5 中 元素的作用是什麼？

元素包含 HTML 文檔的主要內容或將在您的網頁上直接可見的 HTML 文檔的部分。這可以包括文本、圖像、表格、鏈接、表單和其他類型的數據。 標籤通常緊跟在 標籤之後。

元素如何增強 HTML5 結構？

HTML5 中的 <header></header> 元素用於包含介紹性內容或一組導航鏈接。它可以包含一些標題元素，還可以包含其他元素，例如徽標、包裝部分的標題、搜索表單等等。 <header></header> 元素通常包含一個或多個標題標籤（h1 – h6）、徽標或圖標以及作者信息。

HTML5 中 <footer></footer> 元素的用途是什麼？

HTML5 中的 <footer></footer> 元素用於定義文檔或部分的頁腳。它通常包含關於該部分作者的信息、版權信息、指向相關文檔的鏈接等等。您可以在一個文檔中包含多個 <footer></footer> 元素。

<nav></nav> 元素如何改進 HTML5 頁面結構？

HTML5 中的 <nav></nav> 元素用於定義一組導航鏈接。並非頁面上的所有鏈接組都需要位於 <nav></nav> 元素中，該元素僅用於主要導航鏈接塊。瀏覽器（例如殘疾用戶的屏幕閱讀器）可以使用此元素來確定是否省略此內容的初始渲染。

HTML5 中 <article></article> 元素的功能是什麼？

HTML5 中的 <article></article> 元素表示文檔、頁面、應用程序或站點中完整或獨立的組成部分。這可以是論壇帖子、雜誌或報紙文章、博客文章、用戶提交的評論、交互式窗口小部件或小工具，或任何其他獨立的內容項。

元素如何促進 HTML5 結構？

HTML5 中的 <section></section> 元素表示包含在 HTML 文檔中的獨立功能部分，通常帶有標題，而不是更具體的語義元素，例如 <article></article> 或 <aside></aside>。它是內容的主題分組，通常帶有標題，使文檔結構易於理解。

HTML5 中 <aside></aside> 元素的作用是什麼？

HTML5 中的 <aside></aside> 元素用於表示文檔的一部分，其內容與文檔的主要內容僅間接相關。 Aside 通常作為側邊欄或標註框呈現。

<main></main> 元素如何增強 HTML5 結構？

HTML5 中的 <main></main> 元素表示文檔 的主要內容。主要內容區域由與文檔的中心主題直接相關或擴展中心主題的內容或應用程序的中心功能組成。它應該是文檔特有的，不包括在一組文檔（例如站點導航鏈接、頁眉或頁腳信息）中重複的內容。