<main>: The Main element

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

¥The <main> HTML element represents the dominant content of the <body> of a document. The main content area consists of content that is directly related to or expands upon the central topic of a document, or the central functionality of an application.

Try it

一份文档不得包含多个未指定 hidden 属性的 <main> 元素。

¥A document mustn't have more than one <main> element that doesn't have the hidden attribute specified.

属性

¥Attributes

该元素仅包含 全局属性。

¥This element only includes the global attributes.

使用说明

¥Usage notes

<main> 元素的内容对于文档来说应该是唯一的。不应包含在一组文档或文档部分中重复的内容，例如侧边栏、导航链接、版权信息、站点徽标和搜索表单，除非搜索表单是页面的主要功能。

¥The content of a <main> element should be unique to the document. Content that is repeated across a set of documents or document sections such as sidebars, navigation links, copyright information, site logos, and search forms shouldn't be included unless the search form is the main function of the page.

<main> 不会对文档的大纲做出贡献；也就是说，与 <body> 等元素、h2 等标题不同，<main> 不会影响页面结构的 DOM's 概念。这是严格的信息。

¥<main> doesn't contribute to the document's outline; that is, unlike elements such as <body>, headings such as h2, and such, <main> doesn't affect the DOM's concept of the structure of the page. It's strictly informative.

示例

¥Examples

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

结果

¥Result

无障碍问题

¥Accessibility concerns

地标

¥Landmark

<main> 元素的行为类似于 main 地标 角色。辅助技术可以使用 地标 来快速识别并导航到文档的大部分内容。优先使用 <main> 元素而不是声明 role="main"，除非有 旧版浏览器支持问题。

¥The <main> element behaves like a main landmark role. Landmarks can be used by assistive technology to quickly identify and navigate to large sections of the document. Prefer using the <main> element over declaring role="main", unless there are legacy browser support concerns.

跳过导航

¥Skip navigation

跳过导航，也称为 "skipnav"，是一种允许辅助技术用户快速绕过大段重复内容（主导航、信息横幅等）的技术。这可以让用户更快地访问页面的主要内容。

¥Skip navigation, also known as "skipnav", is a technique that allows an assistive technology user to quickly bypass large sections of repeated content (main navigation, info banners, etc.). This lets the user access the main content of the page faster.

将 id 属性添加到 <main> 元素可使其成为跳过导航链接的目标。

¥Adding an id attribute to the <main> element lets it be a target of a skip navigation link.

html
<body>
  <a href="#main-content">Skip to main content</a>

  <!-- navigation and header content -->

  <main id="main-content">
    <!-- main page content -->
  </main>
</body>

阅读器模式

¥Reader mode

将内容转换为专门的阅读器视图时，浏览器阅读器模式功能会查找 <main> 元素以及 heading 和 内容分段元素 是否存在。

¥Browser reader mode functionality looks for the presence of the <main> element, as well as heading and content sectioning elements when converting content into a specialized reader view.

技术总结

¥Technical summary

内容类别 流量内容，可触及的内容。
允许的内容 流量内容.
标签遗漏 没有任何;开始和结束标签都是强制性的。
允许的父级 其中预期 流动内容，但前提是它是 层次正确的 main 元素。
隐式 ARIA 角色 main
允许的 ARIA 角色 不允许 role
DOM 接口 HTMLElement

规范

Specification
HTML Standard
# the-main-element

¥Specifications

浏览器兼容性

BCD tables only load in the browser

¥Browser compatibility

也可以看看

¥See also