最近缘屹，越來(lái)越多的人 HTML5 感興趣檬姥，并開(kāi)始廣泛的使用其中的新元素，其中有一個(gè)就是 <header> 元素察净。 下面我們來(lái)談?wù)勈裁磿r(shí)候能用它吼句，什么時(shí)候不能用它锅必，準(zhǔn)備好了嗎？讓我們直接開(kāi)始吧惕艳。
你可能經(jīng)常會(huì)看到下面這行代碼
<div id="header"></div>
自從有了 HTML5, 我們就不再需要這么做了搞隐，我們可以使用 header 元素使網(wǎng)站更有語(yǔ)義驹愚。
這個(gè)元素代表什么？
根據(jù) HTML spec 尔许， header 語(yǔ)義如下：
為它的父元素內(nèi)容或者父元素的根節(jié)點(diǎn)提供介紹性?xún)?nèi)容么鹤，header 的內(nèi)容一般是一組介紹性文字和導(dǎo)航鏈接。
如果它的父元素內(nèi)容或者父元素的根節(jié)點(diǎn)就是 body 元素味廊，那么它適用于整個(gè)頁(yè)面蒸甜。
重要的一點(diǎn)是，<header> 不引入新的 section余佛， 而是作為 section 的頭部柠新。還有一點(diǎn)值得注意的是，不要將 <header> 和 <head> 弄混淆了辉巡。
在何處使用恨憎？
那么，最明顯的就是我們需要在頁(yè)面起始的部分使用這個(gè)元素郊楣，我們可以在像主頁(yè)標(biāo)題這種位置開(kāi)始憔恳。
<header>
<h1>The most important heading on this page</h1>
<p>With some supplementary information</p>
</header>
需要注意的一點(diǎn)是，并沒(méi)有嚴(yán)格的規(guī)定說(shuō)明一個(gè)頁(yè)面只能使用一個(gè) header净蚤，這就意味著你可以在同一頁(yè)面多次使用這個(gè)元素钥组。每個(gè)使用 header 元素的地方都將成為文檔部分的標(biāo)題。所以今瀑，可能會(huì)出現(xiàn)這樣的代碼：
<header>
<h1>The most important heading on this page</h1>
<p>With some supplementary information</p>
</header>
<article>
<header>
<h2>Title of this article</h2>
<p>By Richard Clark</p>
</header>
<p>...Lorem Ipsum dolor set amet...</p>
</article>
你可能已經(jīng)發(fā)現(xiàn)程梦，我們?cè)?article 中使用的是 <h2>，因?yàn)槲覀儾豢梢栽谝粋€(gè)頁(yè)面中使用多個(gè) <h1>橘荠， 那將會(huì)導(dǎo)致可訪(fǎng)問(wèn)性問(wèn)題屿附，所以 HTML spec 建議
不能依靠輪廓算法來(lái)向用戶(hù)傳達(dá)文檔結(jié)構(gòu)，建議作者使用標(biāo)題等級(jí)（h1-h6）來(lái)傳達(dá)文檔結(jié)構(gòu)哥童。
header 元素需要什么挺份？
現(xiàn)在我們都知道了，一個(gè)頁(yè)面中可能包含多個(gè) header 元素如蚜，但是為了保證 header 元素是符合標(biāo)準(zhǔn)的压恒，我們需要添加哪些內(nèi)容呢？
簡(jiǎn)單的說(shuō)错邦，<header> 標(biāo)簽中至少要包含一個(gè)標(biāo)題 (<h1> - <h6>)，還可以包含文檔流中的其他內(nèi)容型宙，例如內(nèi)容表撬呢，LOGO 或搜索表單。最近的一則更新表明妆兑，你還可以在 <header> 中包含一個(gè) <nav>魂拦。
樣式化 header
我還想說(shuō)明的一個(gè)短點(diǎn)是毛仪，為了使舊的瀏覽器（IE <9）將<header>元素渲染為一個(gè)塊級(jí)元素，您將需要顯式聲明它作為一個(gè)塊在CSS中芯勘，像這樣 ：
header { display:block;}
事實(shí)上箱靴，如果你需要支持IE <9，你將需要為 HTML5 中的大多數(shù)結(jié)構(gòu)元素做到這一點(diǎn)荷愕。
為 header 添加 ARIA
HTML spec 針對(duì) header 有如下建議：
允許的 ARIA 值 ： banner （默認(rèn)不設(shè)置或者是 presentation）
允許的ARIA狀態(tài)和屬性屬性：全局aria-*屬性
適用于允許角色的任何 aria- * 屬性衡怀。
提示： 當(dāng)元素不在 <section> 或<article> 元素中時(shí)，banner 角色僅映射到<header>安疗。當(dāng) <header> 限定為 <body> 元素時(shí)抛杨， 此映射已在瀏覽器中實(shí)現(xiàn)，以避免不適當(dāng)?shù)乇┞?banner 角色語(yǔ)義荐类。
總結(jié)
總之怖现， <header> 給我們一些非常棒附加語(yǔ)義值，以描述文檔或部分的頭玉罐。
