3.3　構(gòu)建語義結(jié)構(gòu)

HTML5新增多個結(jié)構(gòu)化元素，以方便用戶創(chuàng)建更友好的頁面主體框架，下面來詳細(xì)學(xué)習(xí)。

3.3.1　定義頁眉

header表示頁眉，用來標(biāo)識頁面標(biāo)題欄。header元素是一種具有引導(dǎo)和導(dǎo)航作用的結(jié)構(gòu)元素，通常用來放置整個頁面，或者一個內(nèi)容塊的標(biāo)題。

header也可以包含其他內(nèi)容，如數(shù)據(jù)表格、表單或相關(guān)的LOGO信息，一般整個頁面的標(biāo)題應(yīng)該放在頁面的前面。

【示例1】在一個網(wǎng)頁內(nèi)可以多次使用header元素，下面的示例顯示為每個內(nèi)容區(qū)塊添加一個header。

在HTML5中，header內(nèi)部可以包含h1 ~ h6元素，也可以包含hgroup、table、form、nav等元素，只要應(yīng)該顯示在頭部區(qū)域的元素，都可以包含在header元素中。

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

3.3.2　定義導(dǎo)航

nav表示導(dǎo)航條，用來標(biāo)識頁面導(dǎo)航的鏈接組。一個頁面中可以擁有多個nav元素，作為頁面整體或不同部分的導(dǎo)航。具體應(yīng)用場景如下：

• 　主菜單導(dǎo)航。一般網(wǎng)站都設(shè)置有不同層級的導(dǎo)航條，其作用是在站內(nèi)快速切換，如主菜單、置頂導(dǎo)航條、主導(dǎo)航圖標(biāo)等。
• 　側(cè)邊欄導(dǎo)航。現(xiàn)在主流博客網(wǎng)站及商品網(wǎng)站上都有側(cè)邊欄導(dǎo)航，其作用是將頁面從當(dāng)前文章或當(dāng)前商品跳轉(zhuǎn)到相關(guān)文章或商品頁面上去。
• 　頁內(nèi)導(dǎo)航。就是頁內(nèi)錨點鏈接，其作用是在本頁面幾個主要的組成部分之間進(jìn)行跳轉(zhuǎn)。
• 　翻頁操作。翻頁操作是指在多個頁面的前后頁或博客網(wǎng)站的前后篇文章滾動。

并不是所有的鏈接組都要被放進(jìn)nav元素中，只需要將主要的、基本的鏈接組放進(jìn)nav即可。例如，在頁腳中通常會有一組鏈接，包括服務(wù)條款、首頁、版權(quán)聲明等，這時使用footer元素是最恰當(dāng)?shù)摹?/p>

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

上述代碼創(chuàng)建了一個可以拖動的導(dǎo)航區(qū)域，nav元素中包含了3個用于導(dǎo)航的超級鏈接，即“首頁”“圖書”和“論壇”。該導(dǎo)航可用于全局導(dǎo)航，也可放在某個段落，作為區(qū)域?qū)Ш健?/p>

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

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

注意，不要用menu元素代替nav元素。menu主要用在一系列交互命令的菜單上，如快捷菜單。

3.3.3　定義主要區(qū)域

main表示主要，用來標(biāo)識網(wǎng)頁中的主要內(nèi)容。main元素內(nèi)容對于文檔來說應(yīng)當(dāng)是唯一的，它不應(yīng)包含在網(wǎng)頁中重復(fù)出現(xiàn)的內(nèi)容，如側(cè)欄、導(dǎo)航欄、版權(quán)信息、站點標(biāo)志或搜索表單等。

注意，由于main元素不對頁面內(nèi)容進(jìn)行分區(qū)或分塊，所以不會對網(wǎng)頁大綱產(chǎn)生影響。

【示例】下面的頁面是一個完整的主體結(jié)構(gòu)。main元素包圍著代表頁面主題的內(nèi)容。

main元素在一個頁面里僅使用一次。在main開始標(biāo)簽中加上role="main"，這樣可以幫助屏幕閱讀器定位頁面的主要區(qū)域。

與p、header、footer等元素一樣，main元素的內(nèi)容顯示在新的一行，除此之外不會影響頁面的任何樣式。如果創(chuàng)建的是Web應(yīng)用，應(yīng)該使用main包圍其主要的功能。

注意，不能將main放置在article、aside、footer、header或nav元素中。

3.3.4　定義文章塊

article表示文章，用來標(biāo)識頁面中一塊完整的、獨立的、可以被轉(zhuǎn)發(fā)的內(nèi)容。

【示例1】下面的示例演示了article元素的應(yīng)用。

為了精簡，本示例對文章內(nèi)容進(jìn)行了縮寫，并略去了與上一節(jié)相同的nav元素代碼。盡管在這個例子里只有段落和圖像，但article元素可以包含各種類型的內(nèi)容。

現(xiàn)在，頁面有了header、nav、main和article元素，以及它們各自的內(nèi)容。在不同的瀏覽器中，article元素中標(biāo)題的字號可能不同。可以應(yīng)用CSS使它們在不同的瀏覽器中顯示相同的大小。

在HTML5中，article元素表示文檔、頁面、應(yīng)用或網(wǎng)站中一個獨立的容器，原則上是可獨立分配或可再用的。它可以是一篇論壇帖子、一篇雜志或報紙文章、一篇博客條目、一則用戶提交的評論、一個交互式的小部件或小工具，或者任何其他獨立的內(nèi)容項。其他article元素的例子包括電影或音樂評論、案例研究、產(chǎn)品描述等。這些確定是獨立的、可再分配的內(nèi)容項。

可以將article元素嵌套在另一個article元素中，只要里面的article元素與外面的article元素是部分與整體的關(guān)系。一個頁面可以有多個article元素。例如，博客的主頁通常包括幾篇最新的文章，其中每一篇都是其自身的article元素。一個article元素可以包含一個或多個section元素。在article元素里包含獨立的h1 ~ h6元素。

【示例2】上面的示例只是使用article元素的一種方式，下面看看其他的用法。下面的示例展示了對基本的新聞報道或報告進(jìn)行標(biāo)記的方法。注意footer和address元素的使用。這里，address元素只應(yīng)用于其父元素article（即這里顯示的article），而非整個頁面或任何嵌套在那個article元素里面的article元素。

【示例3】下面的示例展示了嵌套在父元素article里面的article元素。本例中嵌套的article元素是用戶提交的評論，就像在博客或新聞網(wǎng)站上見到的評論部分。本例還顯示了section元素和time元素的用法。這些只是使用article及有關(guān)元素的幾個常見方式。

每條讀者評論都包含在一個article元素里，這些article元素則嵌套在主article元素里。

3.3.5　定義區(qū)塊

section表示區(qū)塊，用于標(biāo)識文檔中的節(jié)，在頁面上多對內(nèi)容進(jìn)行分區(qū)，例如，章節(jié)、頁眉、頁腳或文檔中的其他部分。

【辨析】

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

div元素關(guān)注結(jié)構(gòu)的獨立性，而section元素關(guān)注內(nèi)容的獨立性，section元素包含的內(nèi)容可以單獨存儲到數(shù)據(jù)庫中，或輸出到Word文檔中。

【示例1】一個section區(qū)塊通常由標(biāo)題和內(nèi)容組成。下面的示例使用section元素包圍排行版的內(nèi)容，作為一個獨立的內(nèi)容塊進(jìn)行定義。

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

【辨析】

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

• 　article代表文檔、頁面或者應(yīng)用程序中獨立、完整的可以被外部引用的內(nèi)容。因為article是一段獨立的內(nèi)容，所以article通常包含header和footer結(jié)構(gòu)。
• 　section用于對網(wǎng)站或者應(yīng)用程序中頁面上的內(nèi)容進(jìn)行分塊。一個section通常由內(nèi)容和標(biāo)題組成。因此，需要包含一個標(biāo)題，一般不用包含header或者footer結(jié)構(gòu)。

通常使用section元素為那些有標(biāo)題的內(nèi)容進(jìn)行分段，類似文章分段操作。相鄰的section內(nèi)容，應(yīng)當(dāng)是相關(guān)的，而不像article之間各自獨立。

【示例2】下面的示例混用article和section元素，從語義上比較兩者不同。article內(nèi)容強調(diào)獨立性、完整性，section內(nèi)容強調(diào)相關(guān)性。

【追問】

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

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

因此，在使用section元素時應(yīng)該注意幾個問題：

• 　不要將section元素當(dāng)作設(shè)置樣式的結(jié)構(gòu)容器，對于此類操作應(yīng)該使用div元素實現(xiàn)。
• 　如果article、aside或nav元素更符合語義使用條件，不要首選使用section元素。
• 　不要為沒有標(biāo)題的內(nèi)容區(qū)塊使用section元素。

【補充】

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

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

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

【追問】

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

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

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

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

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

在HTML5中，div變成了一種容器，當(dāng)應(yīng)用CSS樣式的時候，可以對這個容器進(jìn)行一個總體的CSS樣式的套用。因此，可以將頁面的所有從屬部分，如導(dǎo)航條、菜單、版權(quán)說明等，包含在一個統(tǒng)一的頁面結(jié)構(gòu)中，以便統(tǒng)一使用CSS樣式來進(jìn)行裝飾。

3.3.6　定義附欄

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

aside元素主要有以下兩種用法。

• 　作為主體內(nèi)容的附屬信息部分，包含在article中，aside內(nèi)容可以是與當(dāng)前內(nèi)容有關(guān)的參考資料、名詞解釋等。

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

aside被放置在一個article內(nèi)部，因此引擎將這個aside內(nèi)容理解為與article內(nèi)容相關(guān)聯(lián)的。

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

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

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

3.3.7　定義頁腳

footer表示腳注，用來標(biāo)識文檔或節(jié)的頁腳。footer元素表示嵌套它的最近的article、aside、blockquote、body、details、fieldset、figure、nav、section或td元素的頁腳。只有當(dāng)它最近的祖先是body元素時，它才是整個頁面的頁腳。

如果一個footer元素包著它所在區(qū)塊（如一個article元素）的所有內(nèi)容，它代表的是像附錄、索引、版權(quán)頁、許可協(xié)議這樣的內(nèi)容。

頁腳通常包含關(guān)于它所在區(qū)塊的信息，如指向相關(guān)文檔的鏈接、版權(quán)信息、作者及其他類似條目。頁腳并不一定要位于所在元素的末尾，不過通常是這樣的。

【示例1】下面的示例中的footer元素代表頁面的頁腳，因為它最近的祖先是body元素。

頁面有了header、nav、main、article、aside和footer元素，當(dāng)然并非每個頁面都需要以上所有元素，但它們代表了HTML中的主要頁面構(gòu)成要素。

footer元素本身不會為文本添加任何默認(rèn)樣式。這里，版權(quán)信息的字號比普通文本的小，這是因為它嵌套在small元素里。像其他內(nèi)容一樣，可以通過CSS修改footer元素所含內(nèi)容的字號。

【示例2】在下面的示例中，第一個footer元素包含在article元素內(nèi)，因此是屬于該article元素的頁腳。第二個footer元素是頁面級的。只能對頁面級的footer元素使用role="contentinfo”，且一個頁面只能使用一次。

3.3.8　使用role

role是HTML5新增屬性，其作用是告訴Accessibility類應(yīng)用（如屏幕閱讀器等）當(dāng)前元素所扮演的角色，主要是供殘疾人使用。使用role可以增強文本的可讀性和語義化。

在HTML5元素內(nèi)，標(biāo)簽本身就是有語義的，因此role作為可選屬性使用，但是在很多流行的框架（如Bootstrap）中都很重視類似的屬性和聲明，目的是為了兼容老版本的瀏覽器（用戶代理）。

role屬性主要應(yīng)用于文檔結(jié)構(gòu)和表單中。例如，設(shè)置輸入密碼框，對于正常人可以用placaeolder提示輸入密碼，但是對于殘障人士是無效的，這個時候就需要role了。另外，在老版本的瀏覽器中，由于不支持HTML5元素，所以有必要使用role屬性。

例如，下面的代碼告訴屏幕閱讀器，此處有一個復(fù)選框，且已經(jīng)被選中。

    <div role="checkbox" aria-checked="checked"> <input type="checkbox" checked></div>

下面是常用的role角色值。

• 　role="banner"（橫幅）

面向全站的內(nèi)容，通常包含網(wǎng)站標(biāo)志、網(wǎng)站贊助者標(biāo)志、全站搜索工具等。橫幅通常顯示在頁面的頂端，而且通常橫跨整個頁面的寬度。

使用方法：將其添加到頁面級的header元素，每個頁面只用一次。

• 　role="navigation"（導(dǎo)航）

文檔內(nèi)不同部分或相關(guān)文檔的導(dǎo)航性元素（通常為鏈接）的集合。

使用方法：與nav元素是對應(yīng)關(guān)系。應(yīng)將其添加到每個nav元素，或其他包含導(dǎo)航性鏈接的容器。這個角色可在每個頁面上使用多次，但是同nav元素一樣，不要過度使用該屬性。

• 　role="main"（主體）

文檔的主要內(nèi)容。

使用方法：與main元素是對應(yīng)關(guān)系。最好將其添加到main元素，也可以添加到其他表示主體內(nèi)容的元素（可能是div）。在每個頁面僅使用一次。

• 　role="complementary"（補充性內(nèi)容）

文檔中作為主體內(nèi)容補充的支撐部分。它對區(qū)分主體內(nèi)容是有意義的。

使用方法：與aside元素是對應(yīng)關(guān)系。應(yīng)將其添加到aside或div元素（前提是該div僅包含補充性內(nèi)容）。可以在一個頁面里包含多個complementary角色，但不要過度使用。

• 　role="contentinfo"（內(nèi)容信息）

包含關(guān)于文檔的信息的大塊、可感知區(qū)域。這類信息的例子包括版權(quán)聲明和指向隱私權(quán)聲明的鏈接等。

使用方法：將其添加至整個頁面的頁腳（通常為footer元素）。每個頁面僅使用一次。

【示例】下面的代碼演示了文檔結(jié)構(gòu)中如何應(yīng)用role。

注意，即便不使用role，頁面看起來也沒有任何差別，但是使用它們可以提升使用輔助設(shè)備的用戶的體驗。出于這個理由，推薦使用它們。

對表單元素來說，form是多余的；search用于標(biāo)記搜索表單；application則屬于高級用法。當(dāng)然，不要在頁面上過多地使用地標(biāo)角色。過多的role角色會讓屏幕閱讀器用戶感到累贅，從而降低role的作用，影響整體體驗。