最近，越来越多的人 HTML5 感兴趣，并开始广泛的使用其中的新元素，其中有一个就是 <header> 元素。 下面我们来谈谈什么时候能用它，什么时候不能用它，准备好了吗？让我们直接开始吧。
你可能经常会看到下面这行代码
<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 元素是符合标准的，我们需要添加哪些内容呢？
简单的说，<header> 标签中至少要包含一个标题 (<h1> - <h6>)，还可以包含文档流中的其他内容，例如内容表，LOGO 或搜索表单。最近的一则更新表明，你还可以在 <header> 中包含一个 <nav>。
样式化 header
我还想说明的一个短点是，为了使旧的浏览器（IE <9）将<header>元素渲染为一个块级元素，您将需要显式声明它作为一个块在CSS中，像这样 ：
header { display:block;}
事实上，如果你需要支持IE <9，你将需要为 HTML5 中的大多数结构元素做到这一点。
为 header 添加 ARIA
HTML spec 针对 header 有如下建议：
允许的 ARIA 值 ： banner （默认不设置或者是 presentation）
允许的ARIA状态和属性属性：全局aria-*属性
适用于允许角色的任何 aria- * 属性。
提示： 当元素不在 <section> 或<article> 元素中时，banner 角色仅映射到<header>。当 <header> 限定为 <body> 元素时， 此映射已在浏览器中实现，以避免不适当地暴露 banner 角色语义。
总结
总之， <header> 给我们一些非常棒附加语义值，以描述文档或部分的头。
网友评论