Movatterモバイル変換


[0]ホーム

URL:


  1. 給開發者的 Web 技術文件
  2. HTML:超文本標記語言
  3. HTML 參考
  4. Elements
  5. <header>

此頁面由社群從英文翻譯而來。了解更多並加入 MDN Web Docs 社群。

View in EnglishAlways switch to English

<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 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,通常包含周圍章節的標題(一個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

瀏覽器相容性

參見

Help improve MDN

Learn how to contribute

This page was last modified on byMDN contributors.


[8]ページ先頭

©2009-2026 Movatter.jp