<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
,通常包含周围部分的标题(h1
– h6
元素)和可选的副标题,但这并不是必要的。
历史用法
<header>
元素最初在 HTML 的早期用于标题。在第一个网站中可以看到。在某个时间点,标题变成了 <h1>
至 <h6>
,使 <header>
可以自由地扮演一个不一样的角色。
属性
此元素包含全局属性。
无障碍
示例
页面标题
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 角色 |
如果是
article 、aside 、main 、nav 或是
section
元素的后代,或者是带有
role=article 、complementary 、main 、navigation
或
region 属性的元素的后代,则为 generic;否则为 banner。
|
允许的 ARIA 角色 | group 、presentation 或 none |
DOM 接口 | HTMLElement |
规范
Specification |
---|
HTML Standard # the-header-element |
浏览器兼容性
BCD tables only load in the browser