<main>: main 元素

Baseline 已广泛支持

此特性已相当成熟,可在许多设备和浏览器版本上使用。自 ⁨2015 年 7 月⁩以来,各浏览器均已提供此特性。

<main> HTML 元素代表文档 <body> 的主内容。主内容区域由与文档中心主题直接相关或扩展中心主题的内容,或与应用程序的中心功能相关的内容组成。

试一试

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

阅读模式

浏览器阅读模式功能会查找 <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

浏览器兼容性

另见