文檔部分，即body部分，包含了訪問者可以看到的內(nèi)容。傳統(tǒng)的HTML文檔通常通過div元素來組織文檔結(jié)構(gòu)，再配上適當(dāng)?shù)臉邮奖?。但div元素的問題是缺少語(yǔ)義信息，在查看別人的源代碼時(shí)，必須費(fèi)點(diǎn)勁才能理解哪個(gè)div表示什么，整個(gè)頁(yè)面時(shí)怎么搭建起來的，通常需要在HTML頁(yè)面、樣式表和瀏覽器之間跳來跳去。特別是如果HTML頁(yè)面的組織結(jié)構(gòu)不好，很容易就會(huì)導(dǎo)致困惑。對(duì)此，HTML5中新增了許多語(yǔ)義元素，用來替換div元素，并且將語(yǔ)義和呈現(xiàn)分離。
所有的語(yǔ)義元素都有一個(gè)顯著的特點(diǎn)：不真正做任何事，它們?cè)谕庥^上對(duì)內(nèi)容的影響微乎其微，甚至根本沒有影響。語(yǔ)義元素的存在主要有以下幾條理由：
1）容易修改和維護(hù)。通過HTML5的語(yǔ)義元素，可以傳達(dá)出額外的結(jié)構(gòu)化信息，讓人很容易理解文檔的整體布局和不同區(qū)塊的作用。
2）無(wú)障礙性?，F(xiàn)代web設(shè)計(jì)的一個(gè)重要主題，就是讓任何人都能無(wú)障礙地訪問網(wǎng)頁(yè)，就是讓使用屏幕閱讀器和其他輔助工具的人都能在頁(yè)面中自由導(dǎo)航。
3）搜索引擎優(yōu)化。使用HTML5能夠讓搜索引擎能夠更好的理解你的網(wǎng)站，可以讓它們收集到它們索引的頁(yè)面的更多信息。
4）未來的功能。新瀏覽器和Web編輯工具未來一定會(huì)利用語(yǔ)義元素。比如：將文檔的主要部分重點(diǎn)呈現(xiàn)。
最關(guān)鍵的是，如果你正確地使用了語(yǔ)義元素，就能夠創(chuàng)建更加清晰的頁(yè)面結(jié)構(gòu)，就能夠適應(yīng)未來的瀏覽器和Web設(shè)計(jì)工具的發(fā)展趨勢(shì)。下面將介紹用于組織文檔結(jié)構(gòu)的語(yǔ)義元素，首先以一個(gè)例子來了解HTML5通常的文檔結(jié)構(gòu)。
HTML5文檔結(jié)構(gòu)
老的HTML頁(yè)面都是用div元素，再配上適當(dāng)?shù)臉邮奖恚玠iv元素的問題在于，它本身不反映與頁(yè)面相關(guān)的任何信息。而HTML5的頁(yè)面就是將這些div元素替換為具有描述性的語(yǔ)義元素。下面的例子包含了HTML5中用于描述文檔結(jié)構(gòu)的主要的語(yǔ)義元素，語(yǔ)義元素的使用和它們標(biāo)注的內(nèi)容的含義密切相關(guān)，理解了它們的含義，你就能靈活的使用它們。
<body>
<header>
<hgroup>
<h1>Things I like</h1>
<h2>by Adam Freeman</h2>
</hgroup>
<address>
Questions and comments?<a href="mailto:adam@myboringblog.com">Email me</a>
</address>
<nav>
<h1>Contents</h1>
<ul>
<li><a href="#fruitsilike">Fruits I Like</a></li>
<ul>
<li><a href="#morefruit">Additional Fruits</a></li>
</ul>
<li><a href="#activitiesilike">Activities I Like</a></li>
<ul>
<li><a href="#tritypes">Kinds of Triathlon</a></li>
<li><a href="#mytri">The kind of triathlon I am aiming for</a></li>
</ul>
</ul>
</nav>
</header>
<main role="main">
<article>
<header>
......
</header>
<aside>
<h1>Why Fruit is Healthy</h1>
<section>
Here ar three reasons why everyone should eat more fruit:
<ol>
<li>Fruit contains lots of vitamins</li>
<li>Fruit is a source of fibre</li>
<li>Fruit contains few calories</li>
</ol>
<section>
</aside>
<section>
<p>I like to swim, cycle and run. I am in training for my first triathlon, but it is hard work.</p>
<details>
<summary>Kinds of Triathlon</summary>
There are different kinds of triathlon - sprint, Olympic and so on. I am aiming for Olympic, which consists of the following:
<ol>
<li>1.5km swim</li>
<li>40km cycle</li>
<li>10km run</li>
</ol>
</details>
</section>
</article>
</main>
<nav>
More Information:
<a href="http://fruit.org">Learn More About Fruit</a>
<a href="http://triathlon.org">Learn More About Triathlons</a>
</nav>
<footer id="mainFooter">
©2011, Adam Freeman. <a href="http://apress.com">Visi Apress</a>
</footer>
</body>
在上面的文檔中包含了許多HTML5的元素，如果你想要將不同的元素在呈現(xiàn)上區(qū)分開來，你需要配合上適當(dāng)?shù)耐庥^，這篇文章不涉及外觀。
標(biāo)題
HTML定義了一套標(biāo)題元素體系，從h1到h6，h1級(jí)別最高。同級(jí)標(biāo)題通常用來將內(nèi)容分作幾個(gè)部分，每個(gè)部分一個(gè)主題。而各級(jí)標(biāo)題則通常用來表示同一主題的各個(gè)方面。他們共同構(gòu)成了文檔的大綱，因此用戶只要瀏覽文檔的各級(jí)標(biāo)題即可初步了解其大意和結(jié)構(gòu)，通過標(biāo)題體系用戶還可以迅速導(dǎo)航到感興趣的內(nèi)容。
<body>
<h1>Fruits I like</h1>
......
</body>
子標(biāo)題
hgroup元素可以用來將幾個(gè)標(biāo)題元素作為一個(gè)整體處理（如果不使用hgroup元素，主標(biāo)題和子標(biāo)題將被作為兩個(gè)標(biāo)題，而使用hgroup之后，主標(biāo)題和子標(biāo)題將被作為一個(gè)標(biāo)題對(duì)待），以免擾亂HTML文檔的大綱。
<body>
<hgroup>
<h1>Fruits I like</h1>
<h2>How I Learned to Love Citrus</h2>
</hgroup>
......
</body>
在這里，“How I Learned to Love Citrus”就是作為“Fruits I like”的子標(biāo)題存在，兩個(gè)將被作為一個(gè)標(biāo)題對(duì)待，通常在樣式上會(huì)將標(biāo)題和子標(biāo)題靠的更緊。
標(biāo)記頁(yè)面的主要區(qū)域
頁(yè)面通常只有一個(gè)部分代表其主要內(nèi)容，可以將這樣的內(nèi)容放在main元素中，該元素在一個(gè)頁(yè)面僅使用一次。
<body>
......
<main role="main">
<article>
......
</article>
</main>
......
</body>
role="main"可以幫助屏幕閱讀器定位頁(yè)面的主要區(qū)域。
創(chuàng)建文章
article元素代表HTML元素中一段獨(dú)立成篇的內(nèi)容，可以獨(dú)立于頁(yè)面其余內(nèi)容發(fā)布或使用，可以看作一篇文章。article可以嵌套在另一個(gè)article中，只要里面的article與外面的article是部分與整體的關(guān)系，且在語(yǔ)義上是可以獨(dú)立存在的。一個(gè)頁(yè)面可以有多個(gè)article元素，每個(gè)article都可以獨(dú)立成篇，一個(gè)article可以包含一個(gè)或多個(gè)section元素（見下一節(jié)）。
<body>
......
<main role="main">
<article>
<header>
......
</header>
<aside>
......
</aside>
<section>
......
</section>
</article>
<article>
<header>
......
</header>
<aside>
......
</aside>
<section>
......
</section>
</article>
......
</main>
......
</body>
section
section元素是HTML5新增，用于表示文檔中的一節(jié)。并沒有明確的規(guī)定什么情況下該使用section元素，但通常section元素應(yīng)該用于包含那種應(yīng)該列入文檔大綱或目錄中的內(nèi)容。section可以屬于某個(gè)article，一個(gè)article可以包含一個(gè)或者多個(gè)section。section元素通常包含一個(gè)或多個(gè)段落及一個(gè)標(biāo)題，不過標(biāo)題并不是必需的。
<body>
<section>
<hgroup>
<h1>Fruits I Like</h1>
<h2>How I Learned to Love Citrus</h2>
</hgroup>
I like apples and oranges.
<section>
<h1>Additional fruits</h1>
I also like bananas, mangoes, cherries, apricots, plums, peaches and grapes.
<section>
<h1>More information</h1>
You can see other fruits I like <a href="fruitlist.html">here</a>.
</section>
</section>
</section>
</body>
上面定義了3個(gè)section，逐層嵌套，每個(gè)section的標(biāo)題都是h1。不過在不同的瀏覽器上，section的層級(jí)結(jié)構(gòu)的默認(rèn)外觀會(huì)有差異，可以通過創(chuàng)建自定義樣式來解決這個(gè)問題。section和article的區(qū)別在于，section在本質(zhì)上組織性和結(jié)構(gòu)性更強(qiáng)，可以看作一個(gè)獨(dú)立的段落，而article代表的是自包含的容器。
首部和尾部
header元素表示一節(jié)的首部，可以包含刊頭和徽標(biāo)。header元素通常包含一個(gè)標(biāo)題元素或一個(gè)hgroup元素，還可以包含該節(jié)的導(dǎo)航元素。一個(gè)頁(yè)面可以包含任意數(shù)量的header元素，他們的含義可以根據(jù)其上下文而不同。
footer元素表示一節(jié)的尾部，通常包含該節(jié)的總結(jié)信息，還可以包含作者介紹、版權(quán)信息、到相關(guān)內(nèi)容的鏈接、徽標(biāo)及免責(zé)聲明等。
<body>
<header>
<hgroup>
<h1>Things I like</h1>
<h2>by Adam Freeman</h2>
</hgroup>
</header>
<section>
<header>
<hgroup>
<h1>Fruits I Like</h1>
<h2>How I Learned to Love Citrus</h2>
</hgroup>
</header>
......
</section>
<section>
<header>
<h1>Activities I like</h1>
</header>
......
<section>
<footer id="mainFooter">
©2011, Adam Freeman. <a href="http://apress.com">Visi Apress</a>
</footer>
</body>
本例定義了3個(gè)header元素。body元素的header元素作為整個(gè)文檔的首部。
注意：不能在footer中嵌套header或另一個(gè)footer，也不能將tooter嵌套在header或address元素里。
導(dǎo)航區(qū)域
nav元素表示文檔中的導(dǎo)航區(qū)域，包含到其他頁(yè)面或同一頁(yè)面的其他部分的鏈接。并不是所有的鏈接都需要放到nav元素中，該元素的目的是規(guī)劃出文檔的主要導(dǎo)航區(qū)域。
<body>
<header>
<hgroup>
<h1>Things I like</h1>
<h2>by Adam Freeman</h2>
</hgroup>
<nav>
<h1>Contents</h1>
<ul>
<li><a href="#fruitsilike">Fruits I Like</a></li>
<ul>
<li><a href="#morefruit">Additional Fruits</a></li>
</ul>
<li><a href="#activitiesilike">Activities I Like</a></li>
<ul>
<li><a href="#tritypes">Kinds of Triathlon</a></li>
<li><a href="#mytri">The kind of triathlon I am aiming for</a></li>
</ul>
</ul>
</nav>
</header>
<section>
......
</section>
<section>
......
</section>
<nav>
More Information:
<a href="http://fruit.org">Learn More About Fruit</a>
<a href="http://triathlon.org">Learn More About Triathlons</a>
</nav>
<footer id="mainFooter">
......
</footer>
</body>
這里使用了兩個(gè)nav元素，在header中的部分為用戶提供了本文檔中的導(dǎo)航方法，另一個(gè)放在文檔末尾，為用戶提供了一些額外的鏈接。
注意不要將所有鏈接都放在nav區(qū)塊中，nav通常應(yīng)該只用于頁(yè)面中最大最主要的導(dǎo)航區(qū)。例如上面提供的文檔導(dǎo)航是由必要放在nav區(qū)塊中的，可是，如果只是一些許可和聯(lián)系方式的信息，就沒必要放在nav區(qū)塊中了。
附注欄
aside元素用來表示跟周邊內(nèi)容稍微沾一點(diǎn)邊的內(nèi)容，類似于書籍或雜志中的側(cè)欄，其內(nèi)容往往與頁(yè)面的其他內(nèi)容、article或section有點(diǎn)關(guān)系，但并非主體內(nèi)容的一部分，它可以是一些背景信息、到相關(guān)文章的鏈接，諸如此類。
<body>
<header>
......
</header>
<article>
<header>
......
</header>
<aside>
<h1>Why Fruit is Healthy</h1>
<section>
Here ar three reasons why everyone should eat more fruit:
<ol>
<li>Fruit contains lots of vitamins</li>
<li>Fruit is a source of fibre</li>
<li>Fruit contains few calories</li>
</ol>
<section>
</aside>
......
</article>
<footer id="mainFooter">
......
</footer>
</body>
你可以像在印刷品中使用附注欄一樣使用aside元素，可以通過它介紹另一個(gè)相關(guān)的話題，或者對(duì)主文檔中提出的某個(gè)觀點(diǎn)進(jìn)行解釋。也可以使用aside元素來存放廣告、相關(guān)內(nèi)容鏈接等。
聯(lián)系信息
address元素用于表示文檔或article元素的聯(lián)系信息。address元素如果為article元素的子元素時(shí)，它提供的聯(lián)系信息被視為該article的；當(dāng)address元素為body元素的子元素時(shí)，它提供的聯(lián)系信息被視為整個(gè)文檔的。address元素不能用來表示文檔或文章的聯(lián)系信息之外的地址，例如：不能用來表示客戶或用戶的地址。
<body>
<header>
......
<address>
Questions and comments?<a href="mailto:adam@myboringblog.com">Email me</a>
</address>
......
</header>
......
</body>
詳情區(qū)域
details元素在文檔中生成一個(gè)區(qū)域，用戶可以展開它以了解關(guān)于某主題的更多詳情。details元素通常包含一個(gè)summary元素，用于為該詳情區(qū)域生成一個(gè)說明標(biāo)簽或標(biāo)題。
<body>
<header>
......
</header>
<article>
<header>
......
</header>
<section>
<p>I like to swim, cycle and run. I am in training for my first triathlon, but it is hard work.</p>
<details>
<summary>Kinds of Triathlon</summary>
There are different kinds of triathlon - sprint, Olympic and so on. I am aiming for Olympic, which consists of the following:
<ol>
<li>1.5km swim</li>
<li>40km cycle</li>
<li>10km run</li>
</ol>
</details>
</section>
</article>
</body>
details元素在瀏覽器中是有默認(rèn)外觀的，在chrome中的效果如下：
details元素默認(rèn)情況下會(huì)是折攏狀態(tài)，只有其summary元素的內(nèi)容可見，要讓頁(yè)面一開始就展開，可以使用它的open屬性（布爾屬性）。
<details open>
<summary>Kinds of Triathlon</summary>
There are different kinds of triathlon - sprint, Olympic and so on. I am aiming for Olympic, which consists of the following:
<ol>
<li>1.5km swim</li>
<li>40km cycle</li>
<li>10km run</li>
</ol>
</details>
效果如下：
小結(jié)
HTML5的語(yǔ)義元素是其發(fā)明者對(duì)已有的網(wǎng)頁(yè)研究的基礎(chǔ)上定義出來的，他們不僅瀏覽了自己喜歡的站點(diǎn)，也研讀了谷歌對(duì)十億個(gè)網(wǎng)頁(yè)的統(tǒng)計(jì)信息。如果你感興趣，可以在這里（google的站點(diǎn)，無(wú)法直接查看）查看。
目前，HTML5的語(yǔ)義元素在所有現(xiàn)代瀏覽器上都得到了支持，但對(duì)于一些老版本的瀏覽器（主要是IE9之前的Internet Explorer），需要一些補(bǔ)救措施。由于語(yǔ)義元素本身什么都不做，要支持它們，只要讓瀏覽器把它們當(dāng)作普通的div元素就行，而剩下的工作，就是為它們添加點(diǎn)樣式規(guī)則，之后，即使使用老古董瀏覽器來訪問這些網(wǎng)頁(yè)，也都沒有問題了。幸運(yùn)的是，這些工作Modernizr已經(jīng)幫你實(shí)現(xiàn)了。
