|
原文鏈接請(qǐng)點(diǎn)擊此處，作者為Richard Clark.
本文為原創(chuàng)翻譯，同時(shí)對(duì)原文做了一些簡(jiǎn)化處理。本文遵循署名-非商業(yè)性使用協(xié)議。
一、不要使用section作為div的替代品
人們?cè)跇?biāo)簽使用中最常見(jiàn)到的錯(cuò)誤之一就是隨意將HTML5的<section>等價(jià)于<div>——具體地說(shuō)，就是直接用作替代品(用于樣式)。在XHTML或者HTML4中，我們�？吹竭@樣的代碼：
<!-- HTML 4-style code -->
<div id="wrapper">
<div id="header">
<h1>My super duper page</h1>
<!-- Header content -->
</div>
<div id="main">
<!-- Page content -->
</div>
<div id="secondary">
<!-- Secondary content -->
</div>
<div id="footer">
<!-- Footer content -->
</div>
</div>
而現(xiàn)在在HTML5中，會(huì)是這樣：
<!-- 請(qǐng)不要復(fù)制這些代碼！這是錯(cuò)誤的！ -->
<section id="wrapper">
<header>
<h1>My super duper page</h1>
<!-- Header content -->
</header>
<section id="main">
<!-- Page content -->
</section>
<section id="secondary">
<!-- Secondary content -->
</section>
<footer>
<!-- Footer content -->
</footer>
</section>
這樣使用并不正確：<section>并不是樣式容器。section元素表示的是內(nèi)容中用來(lái)幫助構(gòu)建文檔概要的語(yǔ)義部分。它應(yīng)該包含一個(gè)頭部。如果你想找一個(gè)用作頁(yè)面容器的元素(就像HTML或者XHTML的風(fēng)格)，那么考慮如Kroc Camen所說(shuō)，直接把樣式寫(xiě)到body元素上吧。如果你仍然需要額外的樣式容器，還是繼續(xù)使用div吧。
基于上述思想，下面才是正確的使用HTML5和一些ARIA roles特性的例子（注意，根據(jù)你自己的設(shè)計(jì)，你也可能需要加入div）
<body>
<header>
<h1>My super duper page</h1>
<!-- Header content -->
</header>
<div role="main">
<!-- Page content -->
</div>
<aside role="complementary">
<!-- Secondary content -->
</aside>
<footer>
<!-- Footer content -->
</footer>
</body>
如果你還是無(wú)法確定使用哪種元素，那么我建議你參考HTML5 sectioning content element flowchart
出處：163 UED Team
責(zé)任編輯：moby
上一頁(yè) 下一頁(yè) 避免常見(jiàn)的六種HTML5錯(cuò)誤用法 [2]
◎進(jìn)入論壇網(wǎng)頁(yè)制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。
|
第 1 頁(yè) 避免常見(jiàn)的六種HTML5錯(cuò)誤用法 [1]
第 2 頁(yè) 
