3.1 新增的主體結構元素

在HTML 5中，為了使文檔的結構更加清晰明確，追加了幾個與頁眉、頁腳、內容區塊等文檔結構相關聯的結構元素。需要說明的是，本章所講的內容區塊是指將HTML頁面按邏輯進行分割后的單位。例如對于書籍來說，章、節都可以稱為內容區塊；對于博客網站來說，導航菜單、文章正文、文章的評論等每一個部分都可稱為內容區塊。

接下來將詳細講解HTML 5中在頁面的主體結構方面新增加的結構元素。

3.1.1 article元素

article元素代表文檔、頁面或應用程序中獨立的、完整的、可以獨自被外部引用的內容。它可以是一篇博客或報刊中的文章、一篇論壇帖子、一段用戶評論或獨立的插件，或其他任何獨立的內容。

除了內容部分，一個article元素通常有它自己的標題（一般放在一個header元素里面），有時還有自己的腳注。

現在，讓我們以博客為例來看一段關于article元素的代碼示例，如代碼清單3-1所示。

代碼清單3-1 article元素示例

<article>
    <header>
        <h1>蘋果</h1>
        <p>發表日期: <time pubdate="pubdate">2010/10/09</time></p>
    </header>
    <p><b>蘋果</b> ，植物類水果，多次花果...（"蘋果"文章正文）</p>
    <footer>
        <p><small>著作權歸***公司所有。</small></p>
    </footer>
</article>

這個示例是一篇講述蘋果的博客文章，在header元素中嵌入了文章的標題部分，在這部分中，文章的標題“蘋果”被鑲嵌在h1元素中，文章的發表日期鑲嵌在p元素中。在標題下部的p元素中，嵌入了一大段該博客文章的正文，在結尾處的footer元素中，嵌入了文章的著作權，作為腳注。整個示例的內容相對比較獨立、完整，因此，對這部分內容使用了article元素。

article元素是可以嵌套使用的，內層的內容在原則上需要與外層的內容相關聯。例如，一篇博客文章中，針對該文章的評論就可以使用嵌套article元素的方式；用來呈現評論的article元素被包含在表示整體內容的article元素里面。

接著，讓我們來看一個關于article元素嵌套的代碼示例，如代碼清單3-2所示。

代碼清單3-2 article元素嵌套示例

<article>
   <header>
      <h1>蘋果</h1>
      <p>發表日期:
            <time pubdate datetime="2010/10/09">2010/10/09</time>
      </p>
   </header>
   <p><b>蘋果</b> ，植物類水果，多次花果...（"蘋果"文章正文）</p>
   <section>
      <h2>評論</h2>
      <article>
         <header>
            <h3>發表者：陸凌牛</h3>
            <p>
               <time pubdate datetime="2010-10-10T19:10-08:00">
                  1小時前
               </time>
            </p>
         </header>
         <p>我喜歡蘋果，我最喜愛的品種是紅富士。</p>
      </article>
      <article>
         <header>
            <h3>發表者：張玉</h3>
            <p>
               <time pubdate datetime="2010-10-10T19:15-08:00">
                     1小時前
               </time>
            </p>
         </header>
         <p>蘋果？我不喜歡，我喜歡吃橘子。</p>
      </article>
   </section>
</article>

這個示例中的內容比代碼清單3-1中的內容更加完整了，它添加了文章讀者的評論內容，示例的整體內容還是比較獨立、完整的，因此對其使用article元素。具體來說，示例內容又分為幾部分，文章標題放在了header元素中，文章正文放在了header元素后面的p元素中，然后section元素把正文與評論部分進行了區分（section元素馬上就要講到，是一個分塊元素，用來把頁面中的內容進行分塊），在section元素中嵌入了評論的內容，評論中每一個人的評論相對來說又是比較獨立、完整的，因此對它們都使用一個article元素，在評論的article元素中，又可以分為標題與評論內容部分，分別放在header元素與p元素中。

關于示例中提到的time元素與pubdate屬性，請查看本節結尾處有關time元素與pubdate屬性的說明。

另外，article元素也可以用來表示插件，它的作用是使插件看起來好像內嵌在頁面中一樣。代碼清單3-3是它的一個示例。

代碼清單3-3 用article元素表示插件

<article>
    <h1>My Fruit Spinner</h1>
    <object>
        <param name="allowFullScreen" value="true">
        <embed src="#" width="600" height="395"></embed>
    </object>
</article>

3.1.2 section元素

section元素用于對網站或應用程序中頁面上的內容進行分塊。一個section元素通常由內容及其標題組成。但section元素并非一個普通的容器元素；當一個容器需要被直接定義樣式或通過腳本定義行為時，推薦使用div而非section元素。

我們可以這樣理解：section元素中的內容可以單獨存儲到數據庫中或輸出到Word文檔中。代碼清單3-4是它的一個示例（注意：標題部分位于它的內部，而不是它的前面）。

代碼清單3-4 section元素示例

<section>
    <h1>蘋果</h1>
    <p><b>蘋果</b> ，植物類水果，多次花果...（"蘋果"文章正文）</p>
</section>

通常不推薦為那些沒有標題的內容使用section元素，可以使用HTML 5輪廓工具來檢查頁面中是否有沒標題的section，HTML 5輪廓工具的網址為“http://gsnedders.html 5.org/outliner/”，如果使用該工具進行檢查后，發現某個section的說明中有“untieled section”（沒有標題的section）文字，這個section就有可能使用不當（但是nav元素或aside元素沒有標題是合理的）。

section元素的作用是對頁面上的內容進行分塊，或者說對文章進行分段，請不要與“有著自己的完整的、獨立的內容”的article元素混淆。

下面，我們來看article元素與section元素結合使用的兩個示例，希望能夠幫助你更好地理解article元素與section元素的區別。

首先來看一個帶有section元素的article元素示例，如代碼清單3-5所示。

代碼清單3-5 帶有section元素的article元素示例

<article>
    <h1>蘋果</h1>
    <p><b>蘋果</b> ，植物類水果，多次花果...</p>
    <section>
        <h2>紅富士</h2>
        <p>紅富士是從普通富士的芽（枝）變中選育出的著色系富的統稱...</p>
    </section>
    <section>
        <h2>國光</h2>
        <p>國光蘋果品，又名小國光、萬壽。原產美國，1600年發現的偶然實生苗...</p>
    </section>
</article>

代碼清單3-5中的內容首先是一段獨立的、完整的內容，因此使用article元素。該內容是一篇關于蘋果的文章，該文章分為3段，每一段都有一個獨立的標題，因此使用了兩個section元素。請記住，對文章分段的工作也是使用section元素完成的。可能有人會問，為什么沒有對第一段使用section元素，這里其實是可以使用section元素的，但是由于其結構比較清晰，分析器可以識別第一段內容在一個section元素里，所以也可以將第一個section元素略，但是如果第一個section元素里還要包含子section元素或子article元素，那么就必須寫明第一個section元素了。

接著，我們來看一個包含article元素的section元素示例，如代碼清單3-6所示。

代碼清單3-6 包含article元素的section元素示例

<section>
    <h1>水果</h1>
    <article>
        <h2>蘋果</h2>
        <p>蘋果，植物類水果，多次花果...</p>
    </article>
    <article>
        <h2>橘子</h2>
        <p>橘子，是蕓香科柑橘屬的一種水果...</p>
    </article>
    <article>
        <h2>香蕉</h2>
        <p>香蕉,屬于芭蕉科芭蕉屬植物，又指其果實，熱帶地區廣泛栽培食用...</p>
    </article>
</section>

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

看到這里，你可能又會糊涂了，這兩個元素可以互換使用嗎？它們的區別到底是什么呢？事實上，在HTML 5中，article元素可以看成是一種特殊種類的section元素，它比section元素更強調獨立性。即section元素強調分段或分塊，而article強調獨立性。具體來說，如果一塊內容相對來說比較獨立、完整的時候，應該使用article元素，但是如果你想將一塊內容分成幾段的時候，應該使用section元素。另外，在HTML 5中，div元素變成了一種容器，當使用CSS樣式的時候，可以對這個容器進行一個總體的CSS樣式的套用。

另外再補充一點，在HTML 5中，你可以將所有頁面的從屬部分，譬如導航條、菜單、版權說明等包含在一個統一的頁面中，以便統一使用CSS樣式來進行裝飾。

最后，關于section元素的使用禁忌總結如下：

1）不要將section元素用作設置樣式的頁面容器，那是div元素的工作。

2）如果article元素、aside元素或nav元素更符合使用條件，不要使用section元素。

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

3.1.3 nav元素

nav元素是一個可以用作頁面導航的鏈接組，其中的導航元素鏈接到其他頁面或當前頁面的其他部分。并不是所有的鏈接組都要被放進nav元素，只需要將主要的、基本的鏈接組放進nav元素即可。例如，在頁腳中通常會有一組鏈接，包括服務條款、首頁、版權聲明等，這時使用footer元素是最恰當。一個頁面中可以擁有多個nav元素，作為頁面整體或不同部分的導航。

接著讓我們來看一個nav元素的使用示例，在這個示例中，一個頁面由幾部分組成，每個部分都帶有鏈接，但只將最主要的鏈接放入了nav元素中，如代碼清單3-7所示。

代碼清單3-7 nav元素示例

<body>
<h1>技術資料</h1>
<nav>
    <ul>
        <li><a href="/">主頁</a></li>
        <li><a href="/events">開發文檔</a></li>
        ...more...
    </ul>
</nav>
<article>
    <header>
        <h1>HTML 5與CSS 3的歷史</h1>
        <nav>
            <ul>
                <li><a href="#HTML 5">HTML 5的歷史</a></li>
                <li><a href="#CSS 3">CSS 3的歷史</a></li>
                ...more...
            </ul>
         </nav>
    </header>
    <section id="HTML 5">
        <h1>HTML 5的歷史</h1>
        <p>講述HTML 5的歷史的正文</p>
    </section>
    <section id="CSS 3">
        <h1>CSS 3的歷史</h1>
        <p>講述CSS 3的歷史的正文</p>
    </section>
    ...more...
    <footer>
        <p>
            <a href="?edit">編輯</a> |
            <a href="?delete">刪除</a> |
            <a href="?rename">重命名</a>
        </p>
      </footer>
</article>
<footer>
    <p><small>版權所有：陸凌牛</small></p>
</footer>
</body>

在這個例子中，第一個nav元素用于頁面導航，將頁面跳轉到其他頁面上去（跳轉到網站主頁或開發文檔目錄頁面）；第二個nav元素放置在article元素中，用作這篇文章中兩個組成部分的頁內導航。

具體來說，nav元素可以用于以下這些場合：

• 傳統導航條。現在主流網站上都有不同層級的導航條，其作用是將當前畫面跳轉到網站的其他主要頁面上去。
• 側邊欄導航。現在主流博客網站及商品網站上都有側邊欄導航，其作用是將頁面從當前文章或當前商品跳轉到其他文章或其他商品頁面上去。
• 頁內導航。頁內導航的作用是在本頁面幾個主要的組成部分之間進行跳轉。
• 翻頁操作。翻頁操作是指在多個頁面的前后頁或博客網站的前后篇文章滾動。

除此之外，nav元素也可以用于其他所有你覺得是重要的、基本的導航鏈接組中。

請注意：在HTML 5中不要用menu元素代替nav元素。過去有很多Web應用程序的開發員喜歡用menu元素進行導航，我想有必要再次強調，menu元素是用在一系列發出命令的菜單上的，是一種交互性的元素，或者更確切地說是使用在Web應用程序中的。

3.1.4 aside元素

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

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

1）被包含在article元素中作為主要內容的附屬信息部分，其中的內容可以是與當前文章有關的參考資料、名詞解釋，等等。這部分代碼請看代碼清單3-8。

代碼清單3-8 文章內部的aside元素示例

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>aside元素示例</title>
</head>
<body>
<header>
    <h1>F#入門</h1>
</header>
<article>
    <h1>第四節詞法閉包</h1>
    <p>lambda表達式可以創建詞法閉包...（文章正文）</p>
    <aside>
        <!-- 因為這個aside元素被放置在一個article元素內部，
        所以分析器將這個aside元素的內容理解成是和article元素的內容相關聯的。-->
        <h1>名詞解釋</h1>
        <dl>
            <dt>F#</dt>
            <dd>F#為.Net2010中引入的新型函數型編程語言</dd>
        </dl>
        <dl>
            <dt>詞法閉包</dt>
            <dd>詞法閉包是指，將創建lambda表達式時的環境保存起來...（詳細解釋）</dd>
        </dl>
    </aside>
</article>
</body>

程序運行結果如圖3-1所示。

圖3-1 aside元素示例

這是筆者博客網頁中的一篇文章，網頁的標題放在了header元素中，在header元素的后面將所有關于文章的部分放在了一個article元素中，將文章的正文部分放在了一個p元素中，但是該文章還有一個名詞解釋的附屬部分，用來解釋該文章中的一些名詞，因此，在p元素的下部又放置了一個aside元素，用來存放名詞解釋部分的內容。

2）在article元素之外使用，作為頁面或站點全局的附屬信息部分。最典型的形式是側邊欄，其中的內容可以是友情鏈接，博客中其他文章列表、廣告單元等。下面這個示例為標準博客網頁中一個側邊欄的示例，示例中的“IT新技術”為博客的名稱，如代碼清單3-9所示。

代碼清單3-9 側邊欄示例

<aside>
    <nav>
        <h2>評論</h2>
        <ul>
            <li>
            <a >erway</a> 10-24 14:25
            </li>
            <li>
            <a >太陽雨</a>10-22 23:48<br/>
            <a >
               頂，拜讀一下老牛的文章
            </a>
            </li>
            <li>
            <a >新浪官博</a>
            08-12 08:50<br/>
            <a href="#">恭喜！您已經成功開通了博客</a>
            </li>
        </ul>
    </nav>
</aside>

如果對這部分再加上CSS樣式，在瀏覽器中的顯示效果如圖3-2所示。

該示例為一個典型的博客網站中的側邊欄部分，因此放在了aside元素中，但是該側邊欄又是具有導航作用的，因此放置在nav元素中，該側邊欄的標題是“評論”，放在了h2元素中，在標題之后使用了一個ul列表，用來存放具體的導航鏈接中。

圖3-2 用aside元素實現的側邊欄示例

3.1.5 time元素與微格式

首先來說一下微格式，它是一種利用HTML的class屬性來對網頁添加附加信息的方法，附加信息例如新聞事件發生的日期和時間、個人電話號碼、企業郵箱等。

微格式并不是在HTML 5之后才有的，在HTML 5之前它就和HTML結合使用了，但是在使用過程中發現在日期和時間的機器編碼上出現了一些問題，編碼過程中會產生一些歧義。HTML 5增加了一種新的元素來無歧義地、明確地對機器的日期和時間進行編碼，并且以讓人易讀的方式來展現它。這個元素就是time元素。

time元素代表24小時中的某個時刻或某個日期，表示時刻時允許帶時差。它可以定義很多格式的日期和時間，如下所示：

<time datetime="2010-11-13">2010年11月13日</time>
<time datetime="2010-11-13">11月13日</time>
<time datetime="2010-11-13">我的生日</time>
<time datetime="2010-11-13T20:00">我生日的晚上8點</time>
<time datetime="2010-11-13T20:00Z">我生日的晚上8點</time>
<time datetime="2010-11-13T20:00+09:00">我生日的晚上8點的美國時間</time>

編碼時機器讀到的部分在datetime屬性里，而元素的開始標記與結束標記中間的部分是顯示在網頁上的。datetime屬性中日期與時間之間要用“T”文字分隔，“T”表示時間。請注意倒數第二行，時間加上Z文字表示給機器編碼時使用UTC標準時間，倒數第一行則加上了時差，表示向機器編碼另一地區時間，如果是編碼本地時間，則不需要添加時差。

3.1.6 pubdate屬性

pubdate屬性是一個可選的、boolean值的屬性，它可以用到article元素中的time元素上，意思是time元素代表了文章（artilce元素的內容）或整個網頁的發布日期，pubdate屬性的具體使用方法如代碼清單3-10所示。

代碼清單3-10 pubdate與time結合使用

<article>
    <header>
        <h1>蘋果</h1>
        <p>發布日期
           <time datetime="2010-10-29" pubdate>2010年10月29日</time>
        </p>
    </header>
   <p>蘋果，植物類水果，多次花果...（"蘋果"文章正文）</p>
  ...
</article>

你也許會疑惑為什么需要用到pubdate屬性，為什么不能認為time元素就直接表示了文章或網頁的發布日期呢？請看代碼清單3-11。

代碼清單3-11 pubdate與time結合使用

<article>
    <header>
        <h1>關于<time datetime=2010-10-29>10月29日</time>的舞會通知</h1>
        <p>發布日期:
           <time datetime=2010-10-11 pubdate>2010年10月11日</time>
        </p>
    </header>
    <p>大家好:我是法律系3年級學生代表,......（關于舞會的通知）</p>
</article>

在這個例子中，有兩個time元素，分別定義了兩個日期—一個是舞會日期，另一個是通知發布日期。由于都使用了time元素，所以需要使用pubdate屬性表明哪個time元素代表了通知的發布日期。