2.2　設計新的文檔結構

HTML5新增多個結構化元素，以方便用戶創建更友好的頁面主體框架，下面來詳細學習。

2.2.1　article——文章塊

article表示文章，用來標識頁面中一塊完整的、獨立的、可以被轉發的內容。例如，報紙文章、論壇帖子、用戶評論、博客條目等。

【示例1】article內容塊通常包含標題，放在header元素里面，有時還包含footer，定義附加信息。下面示例演示了如何使用article設計一篇新聞稿。

上面示例是一篇互聯網新聞的文章，在header元素中嵌入了文章的標題部分，在這部分中，文章的標題被鑲嵌在h1元素中，文章的發表日期鑲嵌在time元素中。在標題下部的p元素中，嵌入了一大段文章的正文，在結尾處的footer元素中，作為腳注，嵌入了文章的來源。整個文章塊的內容相對比較獨立、完整，因此對這部分內容使用了article元素。

【示例2】article元素可以嵌套使用，原則上內層的內容要與外層的內容相關聯。例如，在一篇互聯網新聞中，針對該新聞的相關評論就可以使用嵌套article元素設計，用來呈現評論的article元素被包含在外層article元素里面。

上面示例的內容比示例1的內容更加豐富，它添加了評論內容。具體來說，section把正文與評論部分進行了區分，在section元素中嵌入了評論的內容，評論中每一個人的評論相對來說又是比較獨立、完整的，因此每條評論都使用一個article，在評論中又可以分為標題和評論內容兩部分，分別放在header元素與p元素中。

2.2.2　section——區塊

section表示區塊，用于標識文檔中的節，在頁面上多對內容進行分區。例如，章節、頁眉、頁腳或文檔中的其他部分。

【辨析】

div元素也可以用來對頁面進行分區，但section元素并非一個普通的容器。當一個容器需要被直接定義樣式或通過腳本定義行為時，推薦使用div，而非section元素。

div元素關注結構的獨立性，而section元素關注內容的獨立性，section元素包含的內容可以單獨存儲到數據庫中，或輸出到Word文檔中。

【示例1】一個section區塊通常由標題和內容組成。下面示例使用section元素包裹排行版的內容，作為一個獨立的內容塊進行定義。

section元素包含cite屬性，用來定義section的URL。如果section摘自Web，則可以設置該屬性。

【辨析】

article和section都是HTML5新增的元素，它們都用來區分不同內容，用法也相似，從語義角度分析兩者區分很大。

　article代表文檔、頁面或者應用程序中獨立、完整的可以被外部引用的內容。因為article是一段獨立的內容，所以article通常包含header和footer結構。

　section用于對網站或者應用程序中頁面上的內容進行分塊。一個section通常由內容和標題組成。因此，需要包含一個標題，一般不用包含header或者footer結構。

通常使用section元素為那些有標題的內容進行分段，類似文章分段操作。相鄰的section內容應當是相關的，而不像article之間各自獨立。

【示例2】下面示例混用article和section元素，從語義上比較兩者不同。article內容強調獨立性、完整性，section內容強調相關性。

【追問】

既然article、section是用來劃分區域的，又是HTML5的新元素，那么是否可以用article、section取代div來布局網頁呢？

答案是否定的，div的用處就是布局網頁，劃分大的區域，所以我們習慣性地把div當成了一個容器。而HTML5改變了這種用法，它讓div的工作更純正。div就是用來布局的，在不同的內容塊中，我們按照需求添加article、section等內容塊，并且顯示其中的內容，這樣才是對這些元素的合理使用。

因此，在使用section元素時應該注意幾個問題：

　不要將section元素當作設置樣式的結構容器，對于此類操作應該使用div元素實現。

　如果article、aside或nav元素更符合語義使用條件，不要首選使用section元素。

　不要為沒有標題的內容區塊使用section元素。

【補充】

使用HTML5大綱工具（http://gsnedders.html5.org/outliner/）來檢查頁面中是否有沒標題的section，如果使用該工具進行檢查后，發現某個section的說明中有“untitiled section”（沒有標題的section）文字，這個section就有可能使用不當，但是nav和aside元素沒有標題是合理的。

【示例3】下面示例進一步演示了article和section混用的情景。

在上面示例中，首先可以看到整個版塊是一段獨立的、完整的內容，因此使用article元素標識。該內容是一篇關于W3C的簡介，該文章分為3段，每一段都有一個獨立的標題，因此使用了兩個section元素區分。

【追問】

為什么沒有對第一段使用section元素呢？

其實是可以使用的，但是由于其結構比較清晰，瀏覽器能夠識別第一段內容在一個section內，所以也可以將第一個section元素省略，但是如果第一個section元素里還要包含子section元素或子article元素，那么就必須標識section元素。

【示例4】下面是一個包含article元素的section元素示例。

這個示例比示例3復雜了一些。首先，它是一篇文章中的一段，因此沒有使用article元素。但是，在這一段中有幾塊獨立的內容，所以嵌入了幾個獨立的article元素。

在HTML5中，article可以是一種特殊功能的section元素，它比section元素更強調獨立性。即section元素強調分段或分塊，而article強調獨立性。具體來說，如果一塊內容相對來說比較獨立、完整，應該使用article元素，但是如果想將一塊內容分成幾段，應該使用section元素。

在HTML5中，div變成了一種容器，當應用CSS樣式的時候，可以對這個容器進行一個總體的CSS樣式的套用。因此，可以將頁面的所有從屬部分，如導航條、菜單、版權說明等，包含在一個統一的頁面結構中，以便統一使用CSS樣式來進行裝飾。

2.2.3　nav——導航條

nav表示導航條，用來標識頁面導航的鏈接組。一個頁面中可以擁有多個nav，作為頁面整體或不同部分的導航。具體應用場景如下：

　主菜單導航。一般網站都設置有不同層級的導航條，其作用是在站內快速切換，如主菜單、置頂導航條、主導航圖標等。

　側邊欄導航。現在主流博客網站及商品網站上都有側邊欄導航，其作用是將頁面從當前文章或當前商品跳轉到相關文章或商品頁面上去。

　頁內導航。就是頁內錨點鏈接，其作用是在本頁面幾個主要的組成部分之間進行跳轉。

　翻頁操作。翻頁操作是指在多個頁面的前后頁或博客網站的前后篇文章滾動。

并不是所有的鏈接組都要被放進nav中，只需要將主要的、基本的鏈接組放進nav元素即可。例如，在頁腳中通常會有一組鏈接，包括服務條款、首頁、版權聲明等，這時使用footer元素最恰當。

【示例1】在HTML5中，只要是導航性質的鏈接，我們就可以很方便地將其放入nav元素中。該元素可以在一個文檔中多次出現，作為頁面或部分區域的導航。

上述代碼創建了一個可以拖動的導航區域，nav元素中包含了三個用于導航的超鏈接，即“首頁”“圖書”“論壇”。該導航可用于全局導航，也可放在某個段落，作為區域導航。

【示例2】下面示例由多部分組成，每部分都有鏈接，但只將最主要的鏈接放入nav元素中。

在這個例子中，第一個nav元素用于頁面導航，將頁面跳轉到其他頁面上去，如跳轉到網站主頁或博客頁面；第二個nav元素放置在article元素中，表示在文章中進行導航。除此之外，nav元素也可以用于其他所有你覺得重要的、基本的導航鏈接組中。

2.2.4　aside——輔助欄

aside表示側邊，用來標識所處內容之外的內容。aside內容應該與所處的附近內容相關。例如，當前頁面或文章的附屬信息部分，它可以包含與當前頁面或主要內容相關的引用、側邊廣告、導航條，以及其他類似的有別于主要內容的部分。

aside元素主要有兩種用法：

（1）作為主體內容的附屬信息部分，包含在article中，aside內容可以是與當前內容有關的參考資料、名詞解釋等。

【示例1】下面示例設計一篇文章，文章標題放在header中，在header后面將所有關于文章的部分放在了一個article中，將文章正文放在一個p元素中。該文章包含一個名詞注釋的附屬部分，因此在正文下面放置了一個aside元素，用來存放名詞解釋的內容。

aside被放置在article內部，因此引擎將這個aside內容理解為與article內容相關聯的。

（2）作為頁面或站點輔助功能部分，在article之外使用。最典型的形式是側邊欄，其中的內容可以是友情鏈接、最新文章列表、最新評論列表、歷史存檔、日歷等。

【示例2】下面代碼使用aside元素為個人博客添加一個友情鏈接輔助版塊。

友情鏈接在博客網站中比較常見，一般放在左右兩側的邊欄中，因此可以使用aside來實現，但是這個版塊又具有導航作用，因此嵌套了一個nav元素，該側邊欄的標題是“友情鏈接”，放在了h2元素中，在標題之后使用了一個ul列表，用來存放具體的導航鏈接列表。

2.2.5　main——主要區域

main表示主要，用來標識網頁中的主要內容。main內容對于文檔來說應當是唯一的，它不應包含在網頁中重復出現的內容，如側欄、導航欄、版權信息、站點標志或搜索表單等。

簡單來說，在一個頁面中，不能出現一個以上的main元素。main元素不能被包含在article、aside、footer、header或nav中。

【示例】下面示例使用main元素包含頁面主要區域，這樣更有利于網頁內容的語義分區，同時搜索引擎也能夠主動抓取主要信息，避免被次要信息干擾。

2.2.6　header——標題欄

header表示頁眉，用來標識頁面標題欄。header元素是一種具有引導和導航作用的結構元素，通常用來放置整個頁面或者一個內容塊的標題。

header也可以包含其他內容，如數據表格、表單或相關的LOGO信息，一般整個頁面的標題應該放在頁面的前面。

【示例1】在一個網頁內可以多次使用header元素，下面示例顯示為每個內容區塊添加一個header。

在HTML5中，header內部可以包含h1～h6元素，也可以包含hgroup、table、form、nav等元素，只要應該顯示在頭部區域的標簽，都可以包含在header元素中。

【示例2】下面示例是個人博客首頁的頭部區域，整個頭部內容都放在header元素中。

2.2.7　hgroup——標題組

hgroup表示標題分組，用來為標題或子標題進行分組。通常hgroup與h1～h6元素組合使用，一個內容塊中的標題及其子標題可以通過hrgoup組成一組。但是，如果文章只有一個主標題，則不需要hgroup元素。

【示例】下面示例顯示如何使用hgroup元素把主標題、副標題和標題說明進行分組，以便讓引擎更容易識別標題塊。

2.2.8　footer——頁腳欄

footer表示腳注，用來標識文檔或節的頁腳。footer元素應當含有其包含元素的信息。例如，頁腳通常包含文檔的作者、版權信息、使用條款鏈接、聯系信息等。

【示例1】在HTML4中，一般使用<div id="footer">包含頁腳信息，現在使用footer元素來替代，更富有語義。下面示例使用footer元素為頁面添加版權信息欄目。

【示例2】在一個頁面中，可以使用多個footer元素。同時，可以為article或section內容添加footer。下面示例分別在article、section和body區域內添加footer信息。