主要元素

<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 规范