HTML
<header>
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.
| 内容类别 | 流内容 , palpable content . |
|---|---|
| 准许内容 |
流内容
, but with no
<header>
or
<footer>
descendant.
|
| Tag omission | None, both the starting and ending tag are mandatory. |
| Permitted parents |
Any element that accepts
flow content
. Note that a
<header>
element must not be a descendant of an
<address>
,
<footer>
or another
<header>
元素。
|
| Implicit ARIA role |
banner
，或
no corresponding role
if a descendant of an
文章
,
aside
,
main
,
nav
or
section
element, or an element with
role=
文章
,
complementary
,
main
,
navigation
or
region
|
| Permitted ARIA roles |
group
,
presentation
or
none
|
| DOM 接口 |
HTMLElement
|
<header>
element is not sectioning content and therefore does not introduce a new section in the
outline
. That said, a
<header>
element is intended to usually contain the surrounding section's heading (an
h1
–
h6
element), but this is
not
required.
尽管
<header>
element didn't make its way into specifications until
HTML5
, it actually existed at the very beginning of HTML. As seen in
the very first website
, it was originally used as the
<head>
element. At some point, it was decided to use a different name. This allowed
<header>
to be free to fill a different role later on.
此元素只包括 全局属性 .
<header> <h1>Main Page Title</h1> <img src="mdn-logo-sm.png" alt="MDN logo"> </header>
<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://janesmith.com/the-planet-earth/">Continue reading....</a></p>
</article>
| 规范 | 状态 | 注释 |
|---|---|---|
|
HTML 实时标准
The definition of '<header>' in that specification. |
实时标准 | |
|
HTML5
The definition of '<header>' in that specification. |
推荐 |
| 桌面 | 移动 | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
header
|
Chrome 完整支持 5 | Edge 完整支持 12 | Firefox 完整支持 4 | IE 完整支持 9 | Opera 完整支持 11.1 | Safari 完整支持 5 | WebView Android 完整支持 Yes | Chrome Android 完整支持 Yes | Firefox Android 完整支持 4 | Opera Android 完整支持 11.1 | Safari iOS 完整支持 4.2 | Samsung Internet Android 完整支持 Yes |