主要元素

<main> 元素包含網頁的主要內容。此內容對於單個頁面是唯一的,不應出現在網站的其他位置。重複內容,如頁首,頁尾,導航,徽標等,放在元素之外。

  • <main> 元素最多只能在一頁上使用一次
  • <main> 元素不得作為 articleasidefooterheadernav 元素的後代包含在內。

在以下示例中,我們將顯示單個部落格帖子 (以及相關資訊,如引用和評論)。

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

    <main>
        <h1>Individual Blog Post</h1>
        <p>An introduction for the post.</p>

        <article>
            <h2>References</h2>
            <p>...</p>
        </article>

        <article>
            <h2>Comments</h2> ...
        </article>
    </main>

    <footer>...</footer>
</body>
  • 部落格文章包含在 <main> 元素中,表示這是此頁面的主要內容(因此,在整個網站中是唯一的)。

  • <header><footer> 標籤是 <main> 元素的兄弟

筆記:

HTML5 規範識別 <main> 元件作為分組元素,而不是一個切片元件。

建議將 role="main" ARIA 角色屬性新增到旨在用作主要內容的其他元素,以幫助不支援 HTML5 的使用者代理,併為那些支援 HTML5 的使用者提供更多上下文。

預設情況下,<main> 元素具有主要作用,因此不需要提供。

點選這裡閱讀 <main> 元素的官方 HTML5 規範