<header>: 标题元素

基线 广泛可用

此功能已完善，可在许多设备和浏览器版本上运行。它从以下浏览器中可用 2015 年 7 月.

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

试一试

使用说明

<header> 元素与站点范围内的 banner 地标角色具有相同的含义，除非嵌套在分段内容中。然后，<header> 元素不是地标。

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

否则，它在可访问性树中是 section，通常包含周围部分的标题（h1 – h6 元素）和可选的副标题，但这不是必需的。

历史用法

<header> 元素最初存在于 HTML 的开头，用于表示标题。它出现在 第一个网站 中。在某个时刻，标题变成了 <h1> 到 <h6>，从而使 <header> 可以自由地承担其他角色。

属性

此元素仅包含 全局属性。

无障碍

当 <header> 元素的上下文为 <body> 元素时，它定义了一个 banner 路标。当 HTML 标题元素是 <article>、<aside>、<main>、<nav> 或 <section> 元素的后代时，它不被视为横幅路标。

示例

页面标题

html
<header>
  <h1>Main Page Title</h1>
  <img src="mdn-logo-sm.png" alt="MDN logo" />
</header>

结果

文章标题

html
<article>
  <header>
    <h2>The Planet Earth</h2>
    <p>
      Posted on Wednesday, <time datetime="2017-10-04">4 October 2017</time> by
      Jane Smith
    </p>
  </header>
  <p>
    We live on a planet that's blue and green, with so many things still unseen.
  </p>
  <p><a href="https://example.com/the-planet-earth/">Continue reading…</a></p>
</article>

结果

技术摘要

内容类别 流内容、可感知内容。
允许的内容 流内容，但没有 <header> 或 <footer> 后代。
标签省略 无，起始和结束标签都是必须的。
允许的父元素 任何接受 流内容 的元素。请注意，<header> 元素不能是 <address>、<footer> 或另一个 <header> 元素的后代。
隐式 ARIA 角色 banner，或者如果它是 article、aside、main、nav 或 section 元素或具有 role=article、complementary、main、navigation 或 region 的元素的后代，则为 generic
允许的 ARIA 角色 group、presentation 或 none
DOM 接口 HTMLElement

规范

规范
HTML 标准
# the-header-element

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅