<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
# the-header-element

瀏覽器相容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
header

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

參見