|
如何用HTML 5新標(biāo)簽結(jié)構(gòu)化元素
通過上面的示例，我們了解到HTML 5的新標(biāo)簽對結(jié)構(gòu)化的革新，但切換到實(shí)際使用中，該如何恰當(dāng)?shù)氖褂盟鼈兡兀课蚁脒@也是很多HTML 5學(xué)習(xí)者想問一個問題。如同XHTML語義化一樣，HTML 5語義化標(biāo)簽的使用也應(yīng)該遵循：每個標(biāo)簽都有它特定的意義，而語義化，就是讓我們在適當(dāng)?shù)奈恢糜眠m當(dāng)?shù)臉?biāo)簽，以更好的讓人和機(jī)器(機(jī)器可理解為瀏覽器可理解為搜索引擎)都一目了然。比如header標(biāo)簽一般是頁面的第一個區(qū)塊元素(header標(biāo)簽也可用于類型的頭部元素中，比如文章區(qū)塊的標(biāo)題)，包含的了頁面的主題信息；nav標(biāo)簽一般用于包裹導(dǎo)航信息；footer一般用來包裹頁面底部信息；等等。
下面是我參考HTML 5手冊列出的結(jié)構(gòu)類常用新標(biāo)簽的語義解釋及使用指引：
<header>標(biāo)簽
手冊釋義：定義 section 或 document 的頁眉。
使用指引：一般用來包含頁面頭部，也可用于其他區(qū)域頭部，比如article頭部：
<header>
<hgroup>
<h1>網(wǎng)站標(biāo)題</h1>
<h1>網(wǎng)站副標(biāo)題</h1>
</hgroup>
</header>
<hgroup>標(biāo)簽
手冊釋義：用于對網(wǎng)頁或區(qū)段（section）的標(biāo)題進(jìn)行組合。
使用指引：用于標(biāo)題類的組合，比如文章的標(biāo)題與副標(biāo)題：
<hgroup>
<h1>這是一篇介紹HTML 5結(jié)構(gòu)標(biāo)簽的文章</h1>
<h2>HTML 5的革新</h2>
</hgroup>
<nav>標(biāo)簽
手冊釋義：定義導(dǎo)航鏈接的部分。
使用指引：用于定義頁面的導(dǎo)航部分：
<nav>
<ul>
<li>HTML 5</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</nav>
<aside>標(biāo)簽
定義 article 以外的內(nèi)容。aside 的內(nèi)容應(yīng)該與 article 的內(nèi)容相關(guān)。
使用指引：用于成節(jié)的內(nèi)容，會在文檔流中開始一個新的節(jié)，一般用于與文章內(nèi)容相關(guān)的邊欄：
<aside>
<h1>作者簡介</h1>
<p>Mr.Think，專注Web前端技術(shù)的凡夫俗子。</p>
</aside>
<section>標(biāo)簽
手冊釋義：定義文檔中的節(jié)（section）。比如章節(jié)、頁眉、頁腳或文檔中的其他部分。
使用指引：用于成節(jié)的內(nèi)容，會在文檔流中開始一個新的節(jié)：
<section>
<h1>section是什么？</h1>
<h2>一個新的章節(jié)</h2>
<article>
<h2>關(guān)于section</h1>
<p>section的介紹</p>
…
</article>
</section>
出處：Mr.Think
責(zé)任編輯：bluehearts
上一頁 HTML5的革新:結(jié)構(gòu)之美 [2] 下一頁 HTML5的革新:結(jié)構(gòu)之美 [4]
◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 
第 3 頁 HTML5的革新:結(jié)構(gòu)之美 [3]
