3.1 使用結構標簽構建網頁布局

HTML5可以使用結構標簽構建網頁布局，使Web設計和開發變得容易起來。HTML5提供的各種切割和劃分頁面的手段允許用戶創建切割組件，這些切割組件不僅能用來邏輯地組織站點，而且能夠賦予網站聚合的能力。HTML5可謂是“信息到網站設計的映射方法”，因為它體現了信息映射的本質，即劃分信息并給信息加上標簽，使信息變得容易使用和理解。

在HTML5中，為了使文檔的結構更加清晰明確，通常使用文檔結構元素構建網頁布局。HTML5中的主要文檔結構標簽包括以下內容。

<section>標簽：用于定義文檔中的一段或者一節。

<nav>標簽：用于構建導航鏈接。

<header>標簽：用于定義頁面的頁眉。

<footer>標簽：用于定義頁面的頁腳。

<article>標簽：用于定義頁面、應用程序或網站中一體化的內容。

<aside>標簽：用于定義與頁面內容相關、但有別于主要內容的部分。

<hgroup>標簽：用于定義段或者節的標題。

<time>標簽：用于定義日期和時間。

<mark>標簽：用于定義文檔中需要突出的文字。

使用結構元素構建網頁布局的典型布局如圖3-1所示。

3.1.1 區段標簽<section>

<section>標簽用來定義文檔中的節（section、區段），比如章節、頁眉、頁腳或文檔中的其他部分。例如，下面的代碼定義了文檔中的區段，用于解釋CSS的含義。

3.1.2 導航標簽<nav>

<nav>標簽用來定義導航鏈接的部分。例如，下面的代碼定義了導航條中常見的首頁、上一頁和下一頁鏈接。

3.1.3 頁眉標簽<header>

<header>標簽用來定義頁面的頁眉。例如，下面的代碼定義了文檔的歡迎信息。

3.1.4 頁腳標簽<footer>

<footer>標簽用來定義節（section）或頁面（document）的頁腳。該標簽通常包含網站的版權、創作者的姓名、文檔的創作日期及聯系信息。例如，下面的代碼定義了網站的版權信息。

3.1.5 獨立內容標簽<article>

<article>標簽用來定義獨立的內容，該標簽定義的內容可獨立于頁面中的其他內容。<article>標簽經常應用于論壇帖子、新聞文章、博客條目和用戶評論等。

<section>標簽可以包含<article>標簽，<article>標簽也可以包含<section>標簽。<section>標簽用來將相類似的信息進行分組，而<article>標簽則用來放置諸如一篇文章或博客等的信息。這些內容可在不影響上下文含義的情況下被刪除或是被放置到新的上下文中。與<article>標簽提供了一個完整的信息包相比較，<section>標簽包含的是有關聯的信息，但這些信息自身不能被放置到不同的上下文中，否則其代表的含義就會丟失。

一個<article>標簽通常有它自己的標題（一般放在<header>標簽里面），有時還有自己的腳注。

【例3-1】 使用<article>標簽定義新聞內容。本例在瀏覽器中的顯示效果如圖3-2所示。

【說明】這個示例講述的是使用<article>標簽定義新聞的方法。在<header>標簽中嵌入了新聞的標題部分，標題“愛心包裝產品發布”被嵌入到<h1>標簽中，新聞的發布日期被嵌入到<p>標簽中；在標題下面的<p>標簽中，嵌入了新聞的正文；在結尾處的<footer>標簽中嵌入了新聞的版權，作為腳注。整個示例的內容相對比較獨立、完整，因此使用了<article>標簽。

<article>標簽是可以嵌套使用的，內層的內容在原則上需要與外層的內容相關聯。例如，針對該新聞的評論就可以使用嵌套<article>標簽的方法實現，評論的<article>標簽被包含在整個頁面的<article>標簽里面。

【例3-2】 使用嵌套的<article>標簽定義新聞內容及評論。本例在瀏覽器中的顯示效果如圖3-3所示。

【說明】①這個示例相較于例3-1內容更加完整了，添加了新聞的評論內容，示例的整體內容還是比較獨立、完整的，因此使用了<article>標簽。其中，示例的內容又分為幾個部分，新聞的標題放在了<header>標簽中，新聞正文放在了<header>標簽后面的<p>標簽中，然后<section>標簽把正文與評論部分進行了區分，在<section>標簽中嵌入了評論的內容，在評論中的<article>標簽中又可以分為標題與評論內容部分，分別放在<header>標簽和<p>標簽中。

②在HTML5中，<article>標簽可以被看作一種特殊的<section>標簽，它比<section>標簽更強調獨立性。即<section>標簽強調分段或分塊，而<article>標簽強調獨立性。具體來說，如果一塊內容相對來說比較獨立、完整，應該使用<article>標簽；但是如果用戶需要將一塊內容分成幾段，應該使用<section>標簽。另外，用戶不要為沒有標題的內容區塊使用<section>標簽。

3.1.6 附屬信息標簽<aside>

<aside>標簽用來表示當前頁面或新聞的附屬信息部分，它可以包含與當前頁面或主要內容相關的引用、側邊欄、廣告、導航條，以及其他類似的有別于主要內容的部分。

【例3-3】 使用<aside>標簽定義網頁的側邊欄信息。本例在瀏覽器中的顯示效果如圖3-4所示。

【說明】本例為一個典型的博客網站中的側邊欄部分，因此將其放在了<aside>標簽中；該側邊欄中的導航鏈接放在<nav>標簽中；側邊欄的標題“評論”放在了<h2>標簽中；在標題之后使用了一個無序列表<ul>標簽，用來存放具體的導航鏈接。

3.1.7 分組標簽

分組標簽用于對頁面中的內容進行分組。HTML5中包含3個分組標簽，分別是<figure>標簽、<figcaption>標簽和<hgroup>標簽。

1.<figure>標簽和<figcaption>標簽

<figure>標簽用于定義獨立的流內容（圖像、圖表、照片、代碼等），一般指一個單獨的單元。<figure>標簽的內容應該與主內容相關，但如果將其刪除，也不會對文檔流產生影響。<figcaption>標簽用于為<figure>標簽組添加標題，一個<figure>標簽內最多允許使用一個<figcaption>標簽，該標簽應該放在<figure>標簽的第一個或者最后一個子標簽的位置。

【例3-4】 使用<figure>標簽和<figcaption>標簽將頁面內容分組。本例在瀏覽器中的顯示效果如圖3-5所示。

【說明】本例中，<figcaption>標簽用于定義文章的標題。

2.<hgroup>標簽

<hgroup>標簽用于將多個標題（主標題和副標題）組成一個標題組，并與h1～h6元素組合使用。通常，將<hgroup>標簽放在<header>標簽中。

在使用<hgroup>標簽時要注意以下幾點。

①如果只有一個標題元素，不建議使用<hgroup>標簽。

②當出現一個或者一個以上的標題元素時，推薦使用<hgroup>標簽作為標題元素。

③當一個標題包含副標題、<section>標簽或者<article>標簽時，建議將<hgroup>標簽和標題相關元素存放到<header>標簽中。

【例3-5】 使用<hgroup>標簽分組頁面內容。本例在瀏覽器中的顯示效果如圖3-6所示。

3.1.8 案例——制作愛心包裝新品發布頁面

【例3-6】使用結構標簽構建網頁布局，制作愛心包裝新品發布頁面。本例在瀏覽器中的顯示效果如圖3-7所示。