試一試
<header>Gecko facts</header>
<main>
<p>
Geckos are a group of usually small, usually nocturnal lizards. They are
found on every continent except Antarctica.
</p>
<p>
Many species of gecko have adhesive toe pads which enable them to climb
walls and even windows.
</p>
</main>
header {
font:
bold 7vw "Arial",
sans-serif;
}
文件中不能有多個帶有 <main> 元素的例項，除非這些元素都指定了 hidden 屬性。
屬性
此元素僅包含全域性屬性。
用法說明
<main> 元素的內容應該是文件獨有的。不應包含在文件集或文件節中重複的內容，例如側邊欄、導航連結、版權資訊、網站徽標和搜尋表單，除非搜尋表單是頁面的主要功能。
<main> 不計入文件的大綱；也就是說，與 <body>、標題（如 h2）等元素不同，<main> 不會影響 DOM 對頁面結構的理解。它純粹是資訊性的。
無障礙
地標
<main> 元素表現得像一個 main 地標角色。 地標可以被輔助技術使用，以便快速識別文件的大部分內容並進行導航。優先使用 <main> 元素而不是宣告 role="main"，除非有 舊瀏覽器支援方面的顧慮。
跳過導航
跳過導航，也稱為“skipnav”，是一種技術，允許輔助技術使用者快速繞過大段重複內容（主導航、資訊橫幅等）。這使得使用者可以更快地訪問頁面的主內容。
為 <main> 元素新增 id 屬性可以使其成為跳過導航連結的目標。
html
<body>
<a href="#main-content">Skip to main content</a>
<!-- navigation and header content -->
<main id="main-content">
<!-- main page content -->
</main>
</body>
閱讀模式
示例
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 |
瀏覽器相容性
載入中…