HTML5 — header - 码农教程

最近，越来越多的人 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> 标签中至少要包含一个标题 (<h1> – <h6>)，还可以包含文档流中的其他内容，例如内容表，LOGO 或搜索表单。最近的一则更新表明，你还可以在 <header> 中包含一个 <nav>。

样式化 header

我还想说明的一个短点是，为了使旧的浏览器（IE <9）将

元素渲染为一个块级元素，您将需要显式声明它作为一个块在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> 给我们一些非常棒附加语义值，以描述文档或部分的头。

HTML5 — header

这个元素代表什么？

在何处使用？

header 元素需要什么？

样式化 header

为 header 添加 ARIA

总结