Skip to content

建立 2026-09-15 更新 2026-09-15

頁面結構

一頁新聞網站通常有：上方品牌與選單、中間正文、旁邊相關連結、下方版權。HTML5 為這些角色準備了專用元素。用它們，等於在原始碼裡畫好地圖，輔助科技可以用「地標」（landmark）直接跳到主文，不必從頭聽完整個選單。

常見地標

<body>
  <header>
    <p>唯客學院</p>
    <nav>
      <ul>
        <li><a href="/">首頁</a></li>
        <li><a href="/html5/">HTML5</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <article>
      <h1>為什麼要用語意標籤</h1>
      <p>因為意義比外觀先決定。</p>
    </article>
    <aside>
      <h2>相關閱讀</h2>
      <p><a href="../content/text.md">標題與段落</a></p>
    </aside>
  </main>

  <footer>
    <p>© 唯客學院</p>
  </footer>
</body>
元素 何時用
header 頁面或區塊的開頭：品牌、標題、該區導覽。
nav 主要導覽連結群。不是頁面上每一組連結都要包 nav。
main 這一頁獨有的主內容。可見的 main 一頁只要一個。
article 可獨立抽出去仍有意義的內容，例如一篇文章、一則留言。
section 主題明確的一節，通常自己有標題。
aside 與主文相關但可分開的補充，例如側欄、引言。
footer 頁面或區塊的結尾：版權、相關連結、作者。

header 與 footer 也可以出現在 article 裡面，代表該篇文章的頭尾，不必跟全站頁首頁尾混為一談。

article 與 section

兩者容易搞混：

  • article：這塊拿出去（RSS、轉貼）仍是完整一篇。
  • section：仍屬於更大文件裡的一章，分開讀會缺上下文。

沒有更貼切的元素時才用 div。div 沒有語意，適合當 CSS 或腳本需要的匿名容器。行內的匿名容器用 span。

<!-- 只是為了排版兩欄，沒有新的意義 -->
<div class="layout-split">
  ...
</div>

為什麼不要整頁 div

視覺上，div 加 CSS 可以長得跟 button、nav 一模一樣。對螢幕閱讀器卻差很多：button 會被念成「按鈕」，div 往往只剩裡面的字。Chrome 團隊的 A11ycasts 反覆強調：先用原生元素，再考慮 ARIA。

頁面地標也不要標太多。每個小卡片都包一個 section 又各自加 landmark，輔助科技的地標清單會變得很吵。全站層級保留 header、nav、main、footer 通常就夠。

推薦影音

把 div 換成語意標籤

簡述：Kevin Powell 帶初學者把既有頁面改成 header、main、section、footer，並說明標題層級才是真正的大綱。適合看完本頁範例後動手改自己的練習頁。

為什麼不要用 div 假造按鈕

簡述：Google Chrome Developers《A11ycasts #05》：原生 <button> 已含鍵盤與語意，用 div 冒充要自己重做一堆行為。對應「先用原生 HTML」這條原則。