HTML <header> 元素用于展示介绍性内容,通常包含一组介绍性的或是辅助导航的实用元素。它可能包含一些标题元素,但也可能包含其他元素,比如 Logo、搜索框、作者名称,等等。

内容类型 Flow content,palpable content。
许可内容 Flow content,但是不允许 <header><footer> 成为子元素
标记省略 不允许,开始标签和结束标签都不能省略。
允许的父元素 任何接受 flow content 的元素。注意 <header> 元素不能作为 <address><footer> 或另一个 <header> 元素的子元素。
允许的 ARIA 角色 grouppresentation
DOM 接口 HTMLElement

使用提示

<header> 元素不是分段内容,因此不会往 大纲 中引入新的段落。也就是说,<header> 元素通常用于包含周围部分的标题(h1h6 元素),但这不是必需的。

属性

此元素仅拥有 全局属性

示例

页面的 Header

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

主页标题

MDN

文章的 Header

<article>
  <header>
    <h2>The Planet Earth</h2>
    <p>Posted on Wednesday, 4 October 2017 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://janesmith.com/the-planet-earth/">Continue reading....</a></p>
</article>

规范

规范 状态 备注
HTML Living Standard
<header>
Living Standard  
HTML5
<header>
Recommendation  

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
Basic supportChrome Full support 5Edge Full support YesFirefox Full support 4IE Full support 9Opera Full support 11.1Safari Full support 4.1WebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support 4Opera Android Full support 11Safari iOS Full support 4.2Samsung Internet Android Full support Yes

Legend

Full support  
Full support

参见

文档标签和贡献者

此页面的贡献者: RainSlide, wbamberg, ziyunfei, hutuxu
最后编辑者: RainSlide,