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)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

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

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • ajax跨域问题-web开发必会

    ajax跨域问题 跨域 同源策略限制 同源策略阻止从一个域上加载的脚本获取或操作另一个域上的文档属性。也就是说,受到请求的 URL 的域必须与当前 Web 页面...

    Java帮帮
  • 开发者需要掌握的JS事件

    JavaScript事件 ? 事件通常与函数配合使用,这样就可以通过发生的事件来驱动函数执行。事件是基于对象存在,事件通常可以修饰多种对象。 1.为对象添加事件...

    Java帮帮
  • 【Java提高一】三大特性-封装

    【Java提高】三大特性-封装 三大特性之---封装 封装从字面上来理解就是包装的意思,专业点就是信息隐藏,是指利用抽象数据类型将数据和基于数据的...

    Java帮帮
  • Android pcm转wav格式方法

    程序中的录音文件之前直接保存的是 .pcm格式,一直也相安无事,用的挺好。最近有一个webview中需要加载录音文件,出现了不兼容的问题,所以需要把 .pcm格...

    砸漏
  • SpringCloudGateway笔记(2)-filter与自定义filter

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

    yingzi_code
  • Andorid pcm转码wav

    参考文章:https://blog.csdn.net/hesong1120/article/details/79043482

    饮水思源为名
  • 使用outlet在SAP Spartacus中添加自定义UI

    Just a simple piece of code to inject your custom UI element to SAP Spartacus vi...

    Jerry Wang
  • 【java基础】Jsoup连接URL

    用户5640963
  • 像 React Native 开发 APP 一样,用wn-cli 开发 weapp (微信小程序)

    wn-cli 像React组件开发一样来开发微信小程序

    疯狂的小程序
  • 网络基础 HTTP协议之HTTP消息(HTTP Message)

    两种类型都包含一起始行(start-line),0或更多个header域, 一暗示header域结束的空行,可能还有一个消息主体

    授客

扫码关注云+社区

领取腾讯云代金券