HTML 主要內容 main：一頁一個的主體區塊

Q: 一頁真的只能有一個 main 嗎？

是。畫面上同時可見的 main 只能有一個，否則輔助工具無法判斷哪一塊才是主體。若因為切換頁籤而有多個，其餘必須加上 hidden 屬性隱藏。

Q: main 和 article、section 差在哪？

main 是這一頁的主體容器，一頁一個；article 是能獨立存在的完整內容，可以有很多個；section 是主體內依主題切分的區塊。三者常一起使用。

主要資訊的區塊，每個頁面中只能有一個 <main>，可放入文章、影像、影片...等主要內容。不應包含在文件中重複的內容，例如：側邊欄、導航連結、版權資訊、網站徽標和搜尋表單。螢幕閱讀器也靠它提供「跳至主要內容」的功能。

html

<main>
  <h1>前端網頁開發三劍客</h1>
  <p>HTML、CSS 和 JavaScript 是 Web Developer 不可或缺的專業技能。</p>

  <div>
    <h2>HTML</h2>
    <p>用來描述網頁的內容和語意結構。</p>
  </div>

  <div>
    <h2>CSS</h2>
    <p>用來描述網頁的樣式和畫面如何被呈現。</p>
  </div>

  <div>
    <h2>JavaScript</h2>
    <p>用來描述網頁的行為，讓網頁可以跟使用者互動。</p>
  </div>
</main>

上面每一則其實都是有主題的區塊，改用 <section> 會比 <div> 更精準。

它在頁面中的位置

html

<body>
  <header>
    <nav>...</nav>
  </header>

  <main>
    <h1>這一頁的主題</h1>
    ...
  </main>

  <footer>...</footer>
</body>

<header>、<nav>、<footer> 都放在 <main> 之外，因為它們每一頁都一樣。

對無障礙的幫助

螢幕閱讀器提供 跳至主要內容 的功能，讓使用者不必每次都重聽一遍導覽列。這個功能就是靠 <main> 來定位的，少了它，使用者每進一頁都得從頭聽起。

與 article、section 的分工

元素	角色	數量
`<main>`	這一頁的主體容器	一頁一個
`<article>`	可獨立存在的完整內容	可多個
`<section>`	主體內依主題切分的區塊	可多個

搜尋引擎也靠它判斷哪一段是主要內容，少了它就得靠版面位置與文字量比例去猜，猜錯時側邊欄的推薦文章會被當成主內容。五個地標元素的使用時機見地標元素與網頁結構訊號。

常見問題

一頁真的只能有一個 main 嗎？

是。畫面上同時可見的 <main> 只能有一個，否則輔助工具無法判斷哪一塊才是主體。若因為切換頁籤而有多個，其餘必須加上 hidden 屬性隱藏。

哪些內容不該放進 main？

每一頁都重複出現的東西，例如：頁首、主導覽、頁尾、版權宣告、網站標誌與全站搜尋。它們屬於網站框架，不是這一頁獨有的內容。

main 和 article、section 差在哪？

<main> 是這一頁的主體容器，一頁一個；<article> 是能獨立存在的完整內容，可以有很多個；<section> 是主體內依主題切分的區塊。三者常一起使用。

延伸閱讀

HTML 主要內容 main：一頁一個的主體區塊 ​

它在頁面中的位置 ​

對無障礙的幫助 ​

與 article、section 的分工 ​

常見問題 ​

延伸閱讀 ​