<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 表格仅在浏览器中加载

另请参阅