<header>: The Header element

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

¥The <header> HTML element represents introductory content, typically a group of introductory or navigational aids. It may contain some heading elements but also a logo, a search form, an author name, and other elements.

Try it

使用说明

¥Usage notes

<header> 元素与站点范围的 banner 地标角色具有相同的含义，除非嵌套在分段内容中。那么，<header> 元素就不是一个里程碑了。

¥The <header> element has an identical meaning to the site-wide banner landmark role, unless nested within sectioning content. Then, the <header> element is not a landmark.

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

¥The <header> element can define a global site header, described as a banner in the accessibility tree. It usually includes a logo, company name, search feature, and possibly the global navigation or a slogan. It is generally located at the top of the page.

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

¥Otherwise, it is a section in the accessibility tree, and usually contains the surrounding section's heading (an h1 – h6 element) and optional subheading, but this is not required.

历史使用情况

¥Historical Usage

<header> 元素最初存在于 HTML 标题的最开头。见于 第一个网站。在某个时候，标题变成了 <h1> 至 <h6>，让 <header> 可以自由地扮演不同的角色。

¥The <header> element originally existed at the very beginning of HTML for headings. It is seen in the very first website. At some point, headings became <h1> through <h6>, allowing <header> to be free to fill a different role.

属性

¥Attributes

该元素仅包含 全局属性。

¥This element only includes the global attributes.

示例

¥Examples

页眉

¥Page Header

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

结果

¥Result

文章标题

¥Article 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>

结果

¥Result

无障碍问题

¥Accessibility concerns

当 <header> 元素的上下文是 <body> 元素时，它定义 banner 地标。当 HTML 标头元素是 <article>、<aside>、<main>、<nav> 或 <section> 元素的后代时，不会将其视为横幅标志。

¥The <header> element defines a banner landmark when its context is the <body> element. The HTML header element is not considered a banner landmark when it is descendant of an <article>, <aside>, <main>, <nav>, or <section> element.

技术总结

¥Technical summary

内容类别 流量内容, 可触知的内容.
允许的内容 流量内容，但没有 <header> 或 <footer> 后代。
标签遗漏 无，开始和结束标记都是强制性的。
允许的父级 任何接受 流动内容 的元素。请注意， <header> 元素不得是 <address>、<footer> 或另一个 <header> 元素的后代。
隐式 ARIA 角色 banner 或 generic（如果是 article、 aside、 main、 nav 或 section 元素的后代，或者是具有 role=article、 complementary、 main、 navigation 或 region 的元素）
允许的 ARIA 角色 group、 presentation 或 none
DOM 接口 HTMLElement

规范

Specification
HTML Standard
# the-header-element

¥Specifications

浏览器兼容性

BCD tables only load in the browser

¥Browser compatibility

也可以看看

¥See also