你可能经常会看到下面这行代码
<div id="header"></div>
自从有了 HTML5
, 我们就不再需要这么做了,我们可以使用 header
元素使网站更有语义。
根据 HTML spec , header
语义如下:
为它的父元素内容或者父元素的根节点提供介绍性内容,header 的内容一般是一组介绍性文字和导航链接。 如果它的父元素内容或者父元素的根节点就是 body 元素,那么它适用于整个页面。
重要的一点是,<header>
不引入新的 section
, 而是作为 section
的头部。还有一点值得注意的是,不要将<header>
和 <head>
弄混淆了。
那么,最明显的就是我们需要在页面起始的部分使用这个元素,我们可以在像主页标题这种位置开始。
<header>
<h1>The most important heading on this page</h1>
<p>With some supplementary information</p>
</header>
需要注意的一点是,并没有严格的规定说明一个页面只能使用一个 header
,这就意味着你可以在同一页面多次使用这个元素。每个使用 header
元素的地方都将成为文档部分的标题。所以,可能会出现这样的代码:
<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>
你可能已经发现,我们在 article
中使用的是 <h2>
,因为我们不可以在一个页面中使用多个 <h1>
, 那将会导致可访问性问题,所以 HTML spec 建议
不能依靠轮廓算法来向用户传达文档结构,建议作者使用标题等级(h1-h6)来传达文档结构。
现在我们都知道了,一个页面中可能包含多个 header
元素,但是为了保证 header
元素是符合标准的,我们需要添加哪些内容呢?
简单的说,<header>
标签中至少要包含一个标题 (<h1>
– <h6>
),还可以包含文档流中的其他内容,例如内容表,LOGO 或搜索表单。最近的一则更新表明,你还可以在 <header>
中包含一个 <nav>
。
我还想说明的一个短点是,为了使旧的浏览器(IE <9)将
元素渲染为一个块级元素,您将需要显式声明它作为一个块在CSS中,像这样 :
header { display:block;}
事实上,如果你需要支持IE <9,你将需要为 HTML5
中的大多数结构元素做到这一点。
HTML spec 针对 header
有如下建议:
允许的 ARIA 值 : banner (默认不设置或者是 presentation) 允许的ARIA状态和属性属性:全局aria-
*
属性 适用于允许角色的任何 aria- * 属性。
提示: 当元素不在 <section>
或<article>
元素中时,banner
角色仅映射到<header>
。当 <header>
限定为<body>
元素时, 此映射已在浏览器中实现,以避免不适当地暴露 banner
角色语义。
总之, <header>
给我们一些非常棒附加语义值,以描述文档或部分的头。