<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,通常包含周圍章節的標題(一個 h1h6 元素)和可選的副標題,但這不是必需的。

歷史用法

<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,或如果是 articleasidemainnavsection 元素的後代,或具有 role=articlecomplementarymainnavigationregion 的元素,則為 generic
允許的 ARIA 角色 grouppresentationnone
DOM 介面 HTMLElement

規範

Specification
HTML Standard
# the-header-element

瀏覽器相容性

BCD tables only load in the browser

參見