<main>: 主元素

基線 廣泛可用

此功能已成熟穩定，可在多種裝置和瀏覽器版本上使用。它從以下時間起在所有瀏覽器中可用： 2015 年 7 月.

<main> HTML 元素表示文件 <body> 的主要內容。主要內容區域包含與文件中心主題或應用程式中心功能直接相關或對其進行擴充套件的內容。

試一試

文件中不能包含多個 <main> 元素，且不應指定 hidden 屬性。

屬性

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

使用說明

<main> 元素的內容應在文件中是唯一的。 一組文件或文件部分中重複出現的內容，例如側邊欄、導航連結、版權資訊、網站徽標和搜尋表單，不應包含在內，除非搜尋表單是頁面上的主要功能。

<main> 不影響文件的大綱； 也就是說，與 <body> 這樣的元素，以及 h2 這樣的標題不同，<main> 不會影響 DOM 對頁面結構的理解。 它只是提供資訊。

無障礙性

地標

<main> 元素的行為類似於 main 地標 角色。 地標 可用於輔助技術快速識別和導航到文件的大部分。 除非存在 舊版瀏覽器支援問題，否則建議使用 <main> 元素而不是宣告 role="main"。

跳過導航

跳過導航，也稱為“skipnav”，是一種技術，允許輔助技術使用者快速跳過大量重複的內容（主要導航、資訊橫幅等）。 這讓使用者可以更快地訪問頁面的主要內容。

將 id 屬性新增到 <main> 元素，可以使其成為跳過導航連結的目標。

html
<body>
  <a href="#main-content">Skip to main content</a>

  <!-- navigation and header content -->

  <main id="main-content">
    <!-- main page content -->
  </main>
</body>

閱讀模式

瀏覽器閱讀模式功能會在將內容轉換為專門的閱讀檢視時查詢 <main> 元素的存在，以及 標題 和 內容部分元素。

示例

html
<!-- other content -->

<main>
  <h1>Apples</h1>
  <p>The apple is the pomaceous fruit of the apple tree.</p>

  <article>
    <h2>Red Delicious</h2>
    <p>
      These bright red apples are the most common found in many supermarkets.
    </p>
    <p>…</p>
    <p>…</p>
  </article>

  <article>
    <h2>Granny Smith</h2>
    <p>These juicy, green apples make a great filling for apple pies.</p>
    <p>…</p>
    <p>…</p>
  </article>
</main>

<!-- other content -->

結果

技術概述

內容類別 流內容，可感知的內容。
允許的內容 流內容.
標籤省略 無； 開始和結束標籤都是強制性的。
允許的父級 在預期 流內容 的地方，但前提是它是一個 分層正確的 main 元素。
隱式 ARIA 角色 main
允許的 ARIA 角色 不允許使用 role
DOM 介面 HTMLElement

規範

規範
HTML 標準
# the-main-element

瀏覽器相容性

BCD 表格僅在瀏覽器中載入

另請參閱