<header>:标题元素

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

<header> HTML 元素表示介绍性内容,通常是一组介绍性或导航性辅助内容。它可能包含一些标题元素,也可能包含徽标、搜索表单、作者姓名和其他元素。

尝试一下

使用说明

<header> 元素的意义与网站范围内的 banner 地标角色相同,除非嵌套在分段内容内。在这种情况下,<header> 元素不再是地标。

<header> 元素可以定义一个全局站点标题,在无障碍树中描述为 banner。它通常包括一个徽标、公司名称、搜索功能,以及可能的全局导航或标语。它通常位于页面的顶端。

否则,它是在无障碍树中的一个 section,通常包含周围部分的标题(h1h6 元素)和可选的副标题,但这并不是必要的。

历史用法

<header> 元素最初在 HTML 的早期用于标题。在第一个网站中可以看到。在某个时间点,标题变成了 <h1><h6>,使 <header> 可以自由地扮演一个不一样的角色。

属性

此元素包含全局属性

无障碍

<header> 元素的上下文为 <body> 元素时,它定义了一个 banner 地标。当 HTML 标题元素是 <article><aside><main><nav><section> 元素的后代时,则不视为 banner 地标。

示例

页面标题

html
<header>
  <h1>主页标题</h1>
  <img src="mdn-logo-sm.png" alt="MDN 徽标" />
</header>

结果

文章标题

html
<article>
  <header>
    <h2>行星地球</h2>
    <p>
      作者:Jane Smith,发布日期:<time datetime="2017-10-04"
        >2017 年 10 月 4 日</time
      >
    </p>
  </header>
  <p>我们生活在一个蓝绿相间的星球上,有许多东西还未曾见过。</p>
  <p><a href="https://example.com/the-planet-earth/">继续阅读……</a></p>
</article>

结果

技术概要

内容分类 流式内容可感知内容
允许的内容 流式内容,但没有 <header><footer> 后代。
标签省略 不允许,开始标签和结束标签都不能省略。
允许的父元素 任何接受流式内容的元素。请注意,<header> 元素不得是 <address><footer> 或另一个 <header> 元素的后代。
隐含的 ARIA 角色 如果是 articleasidemainnav 或是 section 元素的后代,或者是带有 role=articlecomplementarymainnavigationregion 属性的元素的后代,则为 generic;否则为 banner
允许的 ARIA 角色 grouppresentationnone
DOM 接口 HTMLElement

规范

Specification
HTML
# the-header-element

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
header

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

参见