|
二、只在需要的時候使用header和hgroup
寫不需要寫的標簽當然是毫無意義的。不幸的是，我經(jīng)常看到header和hgroup被無意義的濫用。你可以閱讀一下關(guān)于header和hgroup元素的兩篇文章做一個詳細的了解，其中內(nèi)容我簡單總結(jié)如下：
- header元素表示的是一組介紹性或者導航性質(zhì)的輔助文字，經(jīng)常用作section的頭部
- 當頭部有多層結(jié)構(gòu)時，比如有子頭部，副標題，各種標識文字等，使用hgroup將h1-h6元素組合起來作為section的頭部
header的濫用
由于header可以在一個文檔中使用多次，可能使得這樣代碼風格受到歡迎：
<!-- 請不要復制這段代碼！此處并不需要header -->
<article>
<header>
<h1>My best blog post</h1>
</header>
<!-- Article content -->
</article>
如果你的header元素只包含一個頭部元素，那么丟棄header元素吧。既然article元素已經(jīng)保證了頭部會出現(xiàn)在文檔概要中，而header又不能包含多個元素（如上文所定義的），那么為什么要寫多余的代碼。簡單點寫成這樣就行了：
<article>
<h1>My best blog post</h1>
<!-- Article content -->
</article>
<hgroup>的錯誤使用
在headers這個主題上，我也經(jīng)常看到hgroup的錯誤使用。有時候不應(yīng)該同時使用hgroup和header:
- 如果只有一個子頭部
- 如果hgroup自己就能工作的很好。。。這不廢話么
第一個問題一般是這樣的：
<!-- 請不要復制這段代碼!此處不需要hgroup -->
<header>
<hgroup>
<h1>My best blog post</h1>
</hgroup>
<p>by Rich Clark</p>
</header>
此例中，直接拿掉hgroup，讓heading果奔吧。
<header>
<h1>My best blog post</h1>
<p>by Rich Clark</p>
</header>
第二個問題是另一個不必要的例子：
<!-- 請不要復制這段代碼!此處不需要header -->
<header>
<hgroup>
<h1>My company</h1>
<h2>Established 1893</h2>
</hgroup>
</header>
如果header唯一的子元素是hgroup，那還要header干神馬？如果header中沒有其他的元素（比如多個hgroup），還是直接拿掉header吧
<hgroup>
<h1>My company</h1>
<h2>Established 1893</h2>
</hgroup>
關(guān)于<hgroup>更多的例子和解釋，請參閱相關(guān)文章
出處：163 UED Team
責任編輯：moby
上一頁 避免常見的六種HTML5錯誤用法 [1] 下一頁 避免常見的六種HTML5錯誤用法 [3]
◎進入論壇網(wǎng)頁制作、WEB標準化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 
第 2 頁 避免常見的六種HTML5錯誤用法 [2]
