<header>: 標題元素

基線 廣泛可用

此功能已完善，可在許多裝置和瀏覽器版本上執行。它從以下瀏覽器中可用 2015 年 7 月.

<header> HTML 元素表示介紹性內容，通常是一組介紹性或導航輔助內容。它可能包含一些標題元素，但也可能包含徽標、搜尋表單、作者姓名和其他元素。

試一試

使用說明

<header> 元素與站點範圍內的 banner 地標角色具有相同的含義，除非巢狀在分段內容中。然後，<header> 元素不是地標。

<header> 元素可以定義全域性站點標題，在可訪問性樹中描述為 banner。它通常包括徽標、公司名稱、搜尋功能，以及可能的全域性導航或標語。它通常位於頁面頂部。

否則，它在可訪問性樹中是 section，通常包含周圍部分的標題（h1 – h6 元素）和可選的副標題，但這不是必需的。

歷史用法

<header> 元素最初存在於 HTML 的開頭，用於表示標題。它出現在 第一個網站 中。在某個時刻，標題變成了 <h1> 到 <h6>，從而使 <header> 可以自由地承擔其他角色。

屬性

此元素僅包含 全域性屬性。

無障礙

當 <header> 元素的上下文為 <body> 元素時，它定義了一個 banner 路標。當 HTML 標題元素是 <article>、<aside>、<main>、<nav> 或 <section> 元素的後代時，它不被視為橫幅路標。

示例

頁面標題

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> 或 <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

規範

規範
HTML 標準
# the-header-element

瀏覽器相容性

BCD 表格僅在瀏覽器中載入

另請參閱