HTML5 — header

最近,越来越多的人 HTML5 感兴趣,并开始广泛的使用其中的新元素,其中有一个就是 <header> 元素。 下面我们来谈谈什么时候能用它,什么时候不能用它,准备好了吗?让我们直接开始吧。

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

    <div id="header"></div>

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


这个元素代表什么?

根据 HTML specheader 语义如下:

为它的父元素内容或者父元素的根节点提供介绍性内容,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)将

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

原文发布于微信公众号 - Java帮帮(javahelp)

原文发表时间:2016-12-09

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏葡萄城控件技术团队

前端代码标准最佳实践:HTML篇

Web前端代码中,HTML是根本,CSS和JavaScript也是围绕着既有的HTML结构来构建,所以良好的HTML代码结构,除了提高了HTML代码的可读性,可...

30090
来自专栏贾鹏辉的技术专栏@CrazyCodeBoy

React Native按钮详解|Touchable系列组件使用详解

尊重版权,未经授权不得转载 本文出自:贾鹏辉的技术博客(http://www.devio.org) 在做App开发过程中离不了的需要用户交互,说到交互,...

60170
来自专栏韩东吉的Unity杂货铺

零基础入门 23: UGUI ScrollView

今天要分享的内容,是近期内关于UGUI的最后一篇,UGUI里的滚动视图ScrollView,后期的内容会根据项目实用的功能组件进行分享。

60210
来自专栏Timhbw博客

Markdown基本语法-自学收藏

2016-05-0918:27:15 发表评论 318℃热度 1.标题 2.待办事项 3.缩写定义 4. 文字格式 5.无序列表 6.有序列表 ...

335110
来自专栏守候书阁

css写作建议和性能优化小结

还有几天就到国庆中秋了,快要放假了,先祝大家节日快乐!之前写过js的写作建议和技巧,那么今天就来聊聊css吧!说到css,每一个网页都离不开css,但是对于cs...

11120
来自专栏非著名程序员

基础篇章:关于 React Native 之 Touchable 系列组件的讲解

? 提示:前天文章,重发,不想看的请略过,上次失误忘了加效果图 (友情提示:RN学习,从最基础的开始,大家不要嫌弃太基础,会的同学请自行略过,希望不要耽误已经...

22890
来自专栏Jerry的SAP技术分享

巧用代理设计模式(Proxy Design Pattern)改善前端图片加载体验

这篇文章介绍一种使用代理设计模式(Proxy Design Pattern)的方法来改善您的前端应用里图片加载的体验。

12340
来自专栏葡萄城控件技术团队

Wijmo 更优美的jQuery UI部件集:自定义 C1WijMenu

C1Wijmo 全部的控件是完全可定制的,并且可以根据你自己的需求定制他们的界面外观。 我准备使用C1Menu演示这一点。 让我们从向控件应用自定义主题开始。 ...

19050
来自专栏Web行业观察

可视化讲解 DOM 的构建过程

最近在看 Secrets of the JavaScript Ninja, 书中第二章讲到 DOM 的构建流程.

10220
来自专栏行者常至

(20)Struts2_主题

8910

扫码关注云+社区

领取腾讯云代金券