HTML 頁首 header：頁面與區塊的開頭

Q: 一頁可以有幾個 header？

沒有數量限制。除了整個網站的標頭，每一則 article 或 section 的開頭都可以有自己的 header。只有直接放在 body 底下的那一個會被輔助工具視為整頁的地標。

Q: header 裡面一定要放 nav 嗎？

不一定。網站標頭常見標誌加主導覽的組合，但 header 也可以只放標題與摘要，例如：一篇文章開頭的標題與發布日期。

Q: header 有哪些擺放限制？

不能放在 footer、address 或另一個 header 裡面。這些位置在語意上互相矛盾，寫了會讓文件結構不合法。

<header> 通常包含標題、Logo、搜索表單，不僅僅表示頁面的頭部，一些獨立章節的頭部也可以使用。因此，可以在 HTML 中重複出現，但不能放進 <footer> 或另一個 <header>。

html

<header>
  <h1>CSS & Div 組合技</h1>
  <p>從最基礎的 CSS Box Model、CSS Selector 觀念講解，再到 CSS Flex 排版和 CSS Grid 排版的進階整合應用。</p>
</header>

小提醒

<header> 可以在 HTML 中重複出現，但不能放置在 <footer>、<address> 或其他 <header> 內。

網站的標頭

直接放在 <body> 底下的那一個，會被輔助工具視為整頁的地標，通常放標誌與主導覽：

html

<body>
  <header>
    <a href="/"><img src="/logo.svg" alt="F2E 前端工程文件"></a>
    <nav>
      <ul>
        <li><a href="/html/what-is-html">HTML</a></li>
        <li><a href="/css/what-is-css">CSS</a></li>
      </ul>
    </nav>
  </header>
  ...
</body>

區塊的開頭

一則文章的標題與發布資訊，也很適合用 <header> 收在一起：

html

<article>
  <header>
    <h2>Vue 3 computed 計算屬性</h2>
    <p>發布於 <time datetime="2026-06-07">2026 年 6 月 7 日</time></p>
  </header>
  <p>...</p>
</article>