HTML5語義化元素詳解及頁面結(jié)構(gòu)構(gòu)建指南

核心要點

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

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

在分解了模板的基礎(chǔ)知識之後，讓我們開始為頁面添加一些內(nèi)容並構(gòu)建其結(jié)構(gòu)。

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

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

• 帶有徽標和標題的 header 部分
• 導(dǎo)航欄
• 分為三列的主體內(nèi)容
• 列中的文章和廣告塊
• 包含一些作者和版權(quán)信息的頁腳

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

header 元素

自然地，我們將首先關(guān)注 header 元素。規(guī)範簡潔地將其描述為“一組介紹性或?qū)Ш捷o助工具”。

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

元素如何在 HTML5 文檔中發(fā)揮作用？

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

HTML5 中 元素的作用是什麼？

元素包含 HTML 文檔的主要內(nèi)容或?qū)⒃谀木W(wǎng)頁上直接可見的 HTML 文檔的部分。這可以包括文本、圖像、表格、鏈接、表單和其他類型的數(shù)據(jù)。 標籤通常緊跟在 標籤之後。

元素如何增強 HTML5 結(jié)構(gòu)？

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

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

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

<nav></nav> 元素如何改進 HTML5 頁面結(jié)構(gòu)？

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

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

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

元素如何促進 HTML5 結(jié)構(gòu)？

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

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

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

<main></main> 元素如何增強 HTML5 結(jié)構(gòu)？

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