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

核心要點(diǎn)

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

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

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

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

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

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

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

header 元素

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

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

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

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

HTML5 中 元素的作用是什么？

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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