《HTML5與CSS3實戰指南》——2.4定義頁面結構

本節書摘來自非同步社群《HTML5與CSS3實戰指南》一書中的第2章，第2.4節,作者： 【美】Estelle Weyl , Louis Lazaris , Alexis Goldstein 更多章節內容可以訪問雲棲社群“非同步社群”公眾號檢視。

2.4 定義頁面結構

現在我們已經瞭解了模板的基礎知識，下面將開始介紹詳細資訊，為網頁指定一些基本結構。

在本書後面的章節中，我們將深入介紹新增CSS3功能和其他HTML5的精華。現在，我們將考慮在網站總體佈局方面應使用哪些元素。我們將在本節以及後面的章節介紹語義。當使用這個術語時，我們指的是用指定的HTML元素名稱來描述其內容的方式。由於HTML5包含一系列廣泛的語義元素，因此您會發現，與過去使用HTML4或XHTML的時候相比，多花了一些時間思考內容結構及含義。非常好！理解了內容的意思才能夠寫出好的標記。

如果您回頭看一下The HTML5 Herald的截圖（或登入線上網站），您會看到它被劃分為以下幾部分。

• 具有徽標和標題的標頭部分。
• 導航欄。
• 主體內容分為3列。
• 列中的文章和廣告塊。
• 頁尾包含一些作者和版權的資訊。

在決定頁面的不同部分採用哪些適當的元素之前，讓我們考慮一些可選項。首先，我們將向您介紹一些新的HTML5的語義元素，這些元素可以幫助我們劃分頁面併為我們的文件結構增添更多的意義。

2.4.1 header元素
很明顯，我們要看的第一個元素是元素。WHATWG規範將它簡單地描述為“一組前言或導航助手。”1從本質上講，這意味著，無論您習慣了在<divid=”header”>中包含什麼內容，現在您都需要將這些內容放在元素header中。

但是，這裡有一個問題，header元素與經常習慣用於網站標題部分的div元素有所不同：這裡沒有每頁只用一次的限制。相反，您可以使用新的header元素介紹每節內容。我們在這裡使用section，實際上並不是下面將要介紹的section元素；從技術上講，它是HTML5中的“分節內容”。在下一章中，我將詳細地介紹這一內容。現在，您可以放心地將它理解為任意一段需要有自己標頭的內容。

header元素可用於頁面內任何特定獨立部分的前言或導航助手，或應用於整個頁面—或兩者兼而有之。

雖然header元素經常會被放在頁面或一節內容的頂部，但是它的定義與其位置無關。網站的佈局可能要求將文章或部落格的標題位於內容的左側、右側或下面。無論怎樣，您仍可使用header元素來描述該內容。

2.4.2 section元素
下一個元素是您所熟悉的HTML5的section元素。WHATWG規範將其定義為：2

section元素表示文件或應用程式的通用部分。在此上下文中，一節就是一組專題內容，並通常帶有標題。

它進一步解釋為，section元素不應僅用於以樣式或指令碼為目的的通用容器。如果您不能將section元素當作通用容器（例如，為了實現您想要的CSS佈局），那麼您該使用什麼呢？我們的老朋友，div元素，在語義上毫無意義。

讓我們回到規範中的定義，section元素的內容應是“主題的”，因此，以通用的方式使用它以包含不相關的內容是不正確的。

以下是一些恰當使用section元素的示例。

選項卡介面的各個部分。
“關於”頁面的部分，例如，一個公司的“關於”頁面，可能包括公司的歷史、使命及其團隊等部分。
很長的“服務條款”頁面的不同部分。
線上新聞網站的各個部分。例如，文章可以分為體育、世界事務以及經濟諮詢等欄目。

語義

一次向網路設計人員提供新的語義標記時，總會就如何正確使用這些元素進行討論，比如規範的意圖到底是什麼等問題。您可能還記得關於在前一個HTML版本中如何正確使用dl元素的討論。HTML5也無法避免，尤其是涉及section元素時。

使Bruce Lawson，備受尊重的HTML5的權威，也承認曾在過去使用section元素不當。為了明確這一點，Lawson發表3了他對這些錯誤的解釋，這是非常值得一看的。簡單地講：

• ection元素是通用的，所以如果有一個更具體的語義元素更恰當（比如article、aside或nav），那麼就使用這些替代section元素。
• ection元素有語義含義，意味著它所包含的內容具有相關性。如果您無法簡潔地用幾個詞描述放在section元素中的內容，那麼極有可能需要一箇中立的容器替代它：更低階的div。

就是說，一般情況下，總是有語義的，所以在某些情況下，此解釋是開放的。如果您可以提出充分的理由使用指定元素而不使用另一個，就替換它。萬一有人要求您使用另一個，那麼所引起的爭論，對於所有參與的人來說，既具有娛樂性又內容豐富，甚至可能會得到關於規範的更廣泛的社會共識。
請記住，如果使用得當，您也可以在現有的section元素中巢狀section元素。例如，對於線上新聞網站，世界新聞欄目可以按照全球各主要地區進行細分。

2.4.3 article元素
article元素與section元素類似，但也有一些明顯的不同之處。以下是根據WHATWG4給出的定義：

rticle元素表示在文件、頁面、應用程式或網站中自我包含的部分，從原則上講，是獨立分佈和重複使用的。例如，在企業聯合組織中。

這一定義的關鍵術語是自我包含的部分和獨立分配。section元素可以包含任何主題的內容，article元素必須是獨立的一部分內容。這確實很難區分—所以在有疑問的時候，嘗試一下這種聯合測試：如果某一段內容可以無需修改重新發布在其他網站上，或通過RSS更新發布，或在社會媒體網站（比如Twitter或Facebook）上推出，就說明它已經含有article元素。

最終，它是由您來決定如何構成article元素中的內容，這裡有一些建議，僅供參考。

• 論壇帖子。
• 雜誌或報紙文章。
• 部落格條目。
• 使用者提交的評論。

最終，就像section元素，article元素可以被巢狀在其他article元素中。您也可以將section元素巢狀在article元素中，反之亦然。

2.4.4 nav元素
可以安全地假設這個元素幾乎會出現在每個專案中。nav元素表示的就是它本身的含義：一組導航連結。儘管nav元素最普通的用途是包含一個無序連結表，但這裡還有其他選擇。例如，有一段文字包含有頁面或頁面某部分的主要導航連結，您也可以再為這一段文字新增nav元素。

在這兩種情況下，nav元素應為最重要的導航預留。所以，建議您避免在頁尾的簡短連結表中使用nav元素。

nav元素及其輔助功能

您可能已經見過在許多網站上實行的設計模式“跳過導航”連結。這個想法可以使已經知道網站主要導航的螢幕閱讀器使用者跳過此處—畢竟，每一次都要聽從大型網站的整個導航選單，然後再單擊它進入頁面，這樣做沒有任何意義！

nav元素有可能消除這種需要。如果一個螢幕閱讀器看到nav元素，那麼它可能允許使用者跳過導航而無需任何其他的連結。該規範規定：

使用者代理（比如螢幕閱讀器）的目標使用者是：在最初呈現導航資訊時已經被省略的使用者；或者是可以立即使用導航資訊的使用者，他們可以使用該元素，作為一種決定頁面哪些內容在最開始時被跳過或根據要求提供的一種方式。

當前螢幕閱讀器無法識別導航時，這並不意味著您不應該使用它。輔助技術將繼續得到發展，很可能您的網頁將在以後的網路上呈現。現在通過建立標準，可以確保螢幕閱讀器不斷改進，您的網頁會隨著時間的推移變得更容易訪問。

什麼是使用者代理？

在瀏覽規範時，您將會多次碰到術語“使用者代理”。它僅是關於瀏覽器的一個非常具有想象力的術語—軟體“代理”，就是使用者用於進入頁面內容的工具。規範不將它簡單地稱為“瀏覽器”是因為使用者代理可以包括螢幕閱讀器或其他閱讀網頁的技術方式。
您可以在指定頁面使用多次nav元素。如果在您的網站上有一個主導航欄，那麼在此處就需要一個nav元素。

另外，如果您有一組二級連結指向當前頁面的不同部分（使用頁錨點），那麼這個工具也應包含在nav元素中。

與section元素一樣，對它的使用仍有一些爭論：由哪些構成nav元素的可接受用途，並且為什麼在某些情況下不推薦使用（如在頁尾內）。一些開發人員認為這種元素是適當的分頁或主題連結路徑下面的標題連結或搜尋形式，這些構成了一個網站導航（就像在Google中）的主要手段。

這一決定最終將取決於您。WHATWG的HTML5規範的首席編輯、程式開發人員Ian Hickson直接回答了這個問題：“使用它就像使用class=nav一樣”。5

2.4.5 aside元素
此元素表示頁面的某一部分與其他內容無關，將這部分內容放在aside元素中，可認為它獨立於其他內容6。

aside元素可用於包含與其他內容不相關的部分。

• 特定獨立的一部分內容（例如，文章或節）。
• 作為慣用做法，將整個頁面或文件作為“側欄”，新增到網頁或網站中。

aside元素不應被用於包含頁面中的主要內容部分。換句話說，它並不是附加說明。aside元素可以自成一體，但仍是整體的一部分。

aside元素的一些可行性用途包括側邊欄、二級連結表或廣告區。應該注意的是，aside`元素（如在頁首的情況下）不是由它在頁面的位置所決定的，它有可能在邊上，也有可能在其他地方；它的內容本身及其與其他元素的關係，決定了它的位置。

2.4.6 footer元素
我們將在本章討論的最後一個元素是footer元素。與header元素一樣，您可以在一個單獨頁面使用多個footer元素。您應使用footer元素包含頁面的某一部分，也就是您通常在<div id=”footer”>中所包含的內容。

根據規範，footer元素表示最近部分內容的頁尾。“部分”內容可以是section、article或aside元素。

通常，頁尾包含版權資訊、相關連結列表、作者資訊和您通常在一個內容塊結尾處所新增的類似內容。然而，與aside和header元素一樣，footer元素沒有根據其在頁面上的位置對其進行定義。因此，它不必出現在某一部分的結尾處或頁面的底部。當然最有可能會出現在這些地方，但這不是硬性規定。例如，關於部落格的作者資訊可以在釋出的文章的上方，而不是在下方，但這仍然被認為是頁尾資訊。

HTML5建立者如何決定包含哪些新元素？

您可能想知道HTML5建立者如何想出了這些新語義元素。畢竟，您可以使用幾十個切實的語義元素—但為什麼沒有用於使用者提交評論的comment元素或專門用於廣告的ad元素呢？

HTML5的創作者通過執行測試，搜尋數以百萬的網頁，看看最常使用哪些元素。根據檢測元素的id和class屬性來篩選這些元素。這一結果引導並幫助瞭解新的HTML語義元素的建立。

因此，不會引進可能被拒絕或不被使用的新技術，HTML5的編輯努力推出與網頁作者和諧工作的元素。換句話說，對於常見的網頁包含id為header的div元素很常見，這樣包含一個header元素是非常有意義的。