<header>：頁首元素

<header> HTML 元素代表導言內容，通常是一組導言或導航輔助元素。它可能包含一些標題元素，也可能包含標誌、搜索表單、作者名稱和其他元素。

嘗試一下

使用注意事項

除了嵌套在章節內容中以外，<header> 元素的含義與站點範圍內的 banner (en-US) 地標角色相同。然後，<header> 元素不是地標。

<header> 元素可以定義全域網站頁首，描述為可存取樹中的 banner。它通常包括標誌、公司名稱、搜索功能，可能還有全域導覽或標語。它通常位於頁面的頂部。

否則，在可存取樹中它是一個 section，通常包含周圍章節的標題（一個 h1 – h6 元素）和可選的副標題，但這不是必需的。

歷史用法

<header> 元素最初存在於 HTML 標題的開始處。它在第一個網站中可見。在某個時候，標題變成了 <h1> 到 <h6>，允許 <header> 自由填補不同的角色。

屬性

此元素僅包括全域屬性 (en-US)。

範例

頁面頁首

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 (en-US) 地標。當 HTML 頁首元素是 <article>、<aside>、<main> (en-US)、<nav> 或 <section> 元素的後代時，HTML 頁首元素不被認為是橫幅地標。

技術摘要

內容類型 流內容、捫及內容
允許的內容 流內容，但不包含 <header> 或 <footer> 的後代。
標籤省略 不允許，開始和結束標籤都是必需的。
允許的父元素 任何接受流內容的元素。請注意，<header> 元素不得是 <address>、<footer> 或另一個 <header> 元素的後代。
隱含的 ARIA 角色 banner (en-US)，或如果是 article、aside、main (en-US)、nav 或 section 元素的後代，或具有 role=article (en-US)、complementary (en-US)、main (en-US)、navigation (en-US) 或 region (en-US) 的元素，則為 generic (en-US)。
允許的 ARIA 角色 group (en-US)、presentation (en-US) 或 none (en-US)
DOM 介面 HTMLElement (en-US)

規範

Specification
HTML Standard
# the-header-element

瀏覽器相容性

BCD tables only load in the browser

參見