<header>：頁首元素
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
<header> HTML 元素代表導言內容，通常是一組導言或導航輔助元素。它可能包含一些標題元素，也可能包含標誌、搜索表單、作者名稱和其他元素。
嘗試一下
<header>
<a class="logo" href="#">Cute Puppies Express!</a>
</header>
<article>
<header>
<h1>Beagles</h1>
<time>08.12.2014</time>
</header>
<p>
I love beagles <em>so</em> much! Like, really, a lot. They’re adorable and
their ears are so, so snugly soft!
</p>
</article>
.logo {
background: left / cover
url("/shared-assets/images/examples/puppy-header.jpg");
display: flex;
height: 120px;
align-items: center;
justify-content: center;
font:
bold calc(1em + 2 * (100vw - 120px) / 100) "Dancing Script",
fantasy;
color: #ff0083;
text-shadow: #000 2px 2px 0.2rem;
}
header > h1 {
margin-bottom: 0;
}
header > time {
font: italic 0.7rem sans-serif;
}
使用注意事項
除了嵌套在章節內容中以外，<header> 元素的含義與站點範圍內的 banner 地標角色相同。然後，<header> 元素不是地標。
<header> 元素可以定義全域網站頁首，描述為可存取樹中的 banner。它通常包括標誌、公司名稱、搜索功能，可能還有全域導覽或標語。它通常位於頁面的頂部。
否則，在可存取樹中它是一個 section，通常包含周圍章節的標題（一個 h1 – h6 元素）和可選的副標題，但這不是必需的。
歷史用法
<header> 元素最初存在於 HTML 標題的開始處。它在第一個網站中可見。在某個時候，標題變成了 <h1> 到 <h6>，允許 <header> 自由填補不同的角色。
屬性
此元素僅包括全域屬性。
範例
頁面頁首
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> 元素在其上下文為 <body> 元素時定義了一個 banner 地標。當 HTML 頁首元素是 <article>、<aside>、<main>、<nav> 或 <section> 元素的後代時，HTML 頁首元素不被認為是橫幅地標。
技術摘要
| 內容類型 | 流內容、捫及內容 |
|---|---|
| 允許的內容 |
流內容，但不包含 <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 |
規範
| Specification |
|---|
| HTML # the-header-element |
瀏覽器相容性
Loading…