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

本節書摘來自異步社群《html5與css3實戰指南》一書中的第2章，第2.4節,作者： 【美】estelle weyl , louis lazaris , alexis goldstein 更多章節内容可以通路雲栖社群“異步社群”公衆号檢視。

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

在本書後面的章節中，我們将深入介紹添加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元素是非常有意義的。