大数据

HTML5 语义化 — header

最近,越来越多的人 HTML5 感兴趣,并开始广泛的使用其中的新元素,其中有一个就是

元素。 下面我们来谈谈什么时候能用它,什么时候不能用它,准备好了吗?让我们直接开始吧。

你可能经常会看到下面这行代码

    

自从有了 HTML5, 我们就不再需要这么做了,我们可以使用 header 元素使网站更有语义。


这个元素代表什么?

根据 HTML specheader 语义如下:

为它的父元素内容或者父元素的根节点提供介绍性内容,header 的内容一般是一组介绍性文字和导航链接。

如果它的父元素内容或者父元素的根节点就是 body 元素,那么它适用于整个页面。

重要的一点是,

不引入新的 section, 而是作为 section 的头部。还有一点值得注意的是,不要将

弄混淆了。


在何处使用?

那么,最明显的就是我们需要在页面起始的部分使用这个元素,我们可以在像主页标题这种位置开始。

    

The most important heading on this page

With some supplementary information

需要注意的一点是,并没有严格的规定说明一个页面只能使用一个 header,这就意味着你可以在同一页面多次使用这个元素。每个使用 header 元素的地方都将成为文档部分的标题。所以,可能会出现这样的代码:

    

The most important heading on this page

With some supplementary information

Title of this article

By Richard Clark

...Lorem Ipsum dolor set amet...

你可能已经发现,我们在 article 中使用的是

,因为我们不可以在一个页面中使用多个

, 那将会导致可访问性问题,所以 HTML spec 建议

不能依靠轮廓算法来向用户传达文档结构,建议作者使用标题等级(h1-h6)来传达文档结构。


header 元素需要什么?

现在我们都知道了,一个页面中可能包含多个 header 元素,但是为了保证 header 元素是符合标准的,我们需要添加哪些内容呢?

简单的说,

标签中至少要包含一个标题 (

),还可以包含文档流中的其他内容,例如内容表,LOGO 或搜索表单。最近的一则更新表明,你还可以在

中包含一个