面的規(guī)劃

Header區(qū)

Header區(qū)的例子包含了頁面標題和副標題，< header>標簽被用來創(chuàng)建頁面的Header區(qū)的內容。除了網頁本身之外，< header>標簽還可以包含關于< section>和< article>的公開信息。這里創(chuàng)建的網頁有該頁面的一個Header區(qū)，這在高層設計中有給出，以及一個位于Article和Section區(qū)內部的Header區(qū)。清單1提供了一個< header>標簽標記的例子。

清單1. < header>標簽的例子

<header>
<h1>標題文字</h1>
<p> 文本或是圖像可放在這里</p>
<p> Logo通常也放在這個地方</p>
</header>

< header>標簽還可以包含一個< hgroup>標簽，如清單2所示。< hgroup>標簽把標題分組放在一起，使用< h1>到< h6>這些標題分級來在此處顯示主標題和子標題。

清單2. < hgroup>標簽的例子

<header>
<hgroup>
<h1>主標題</h1>
<h2>子標題 </h2>
</hgroup>
<p> 文本或是圖像可放在這里</p>
</header>

Navigation區(qū)

你可以使用< nav>標簽來創(chuàng)建頁面的Navigation區(qū)。< nav>元素定義了一個專門用于導航的區(qū)域，< nav>標簽應該用做主站點的導航，而不是用來放置被包含在頁面的其他區(qū)域中的鏈接。Navigation區(qū)可以包含諸如清單3所示的代碼。

清單3. < nav>標簽的例子

<nav>
<ul>
<li>< a href="#" kesrc="#">Home</a></li>
<li>< a href="#" kesrc="#">About Us<a></li>
<li>< a href="#" kesrc="#">Our Products</a></li>
<li>< a href="#" kesrc="#">Contact Us</a></li>
</ul>
</nav>

Article和Section區(qū)

你設計的頁面包含了一個Article區(qū)，該區(qū)域存放了頁面的實際內容。你使用< article>標簽來創(chuàng)建這一區(qū)域，該標簽定義的內容可獨立于頁面中的其他內容使用。例如，如果想創(chuàng)建一個RSS源（RSS feed）的話，那么你可以使用< article>來唯一標識該內容。< article>標簽標識了可被刪除、可被放置在另一上下文中，并且是可被完全理解的內容。

Acme United規(guī)劃中的Article區(qū)包含了三個Section區(qū)，可使用< setction>標簽來創(chuàng)建這幾個區(qū)域。< section>包含了web內容的相關組件區(qū)域，< section>標簽——以及< article>標簽——可以包含頁眉、頁腳，或是其他需要用來完成該部分內容的組件。< section>標簽用于分組的內容，< section>標簽和< article>標簽通常以一個< header>為開始并以一個< footer>結束，標簽的內容則放在這兩者之間。

< section>標簽也可以包含< article>標簽，就像< article>標簽可以包含< section>標簽一樣。< section>標簽應該用來分組相類似的信息，而< article>標簽則應該是用來放置諸如一篇文章或是博客一類的信息，這些內容可在不影響內容含義的情況下被刪除或是被放置到新的上下文中。< article>標簽，正如它的名稱所暗示的那樣，提供了一個完整的信息包。相比之下，< section>標簽包含的是有關聯(lián)的信息，但這些信息自身不能被放置到不同的上下文中，因為這樣的話其所代表的含義就會丟失。

<article>和<section>標簽的用法例子請參見清單4。

清單4. < article>標簽和< section>標簽的例子

<article>
<section>
Content
</section>
<section>
Content
</section>
</article>
<section>
<article>
Content
</article>
<article>
Content
</article>
</section>

圖像元素

<section>和< article>標簽這兩者，以及< header>和< footer>標簽都可以包含< figure>標簽，你使用該標簽來加入圖像、圖表和照片。

<figure>標簽可以包含<figcaption>，該標簽相應的包含了包含在< figure>標簽中的圖形的標題，其允許你輸入描述，把圖形和內容更加緊密的關聯(lián)起來。清單5提供了一個< figure>和< figcaption>標簽結構的例子。

清單5. < figure>和< figcaption>標簽的例子

<figure>
<img src="/figure.jpg" kesrc="/figure.jpg" width="304" height="228" alt="Picture">
<figcaption>Caption for the figure</figcaption>
</figure>