翻译正在进行中。

HTML <main> 元素呈现了文档的 <body> 或应用的主体部分。主体部分由与文档直接相关,或者扩展于文档的中心主题、应用的主要功能部分的内容组成。

属性

此元素仅包含全局属性

Usage notes

这部分内容在文档中应当是独一无二的,不包含在任何一系列文档中重复的内容,比如侧边栏,导航栏链接,版权信息,网站 Logo,搜索框(除非搜索框为文档的主要功能)。

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

示例

<!-- 其他内容 -->

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

<!-- 其他内容 -->

可访问性相关

界标 Landmark

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

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 allows the user to access the main content of the page faster.

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

<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

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

规范

规范 状态 备注
HTML Living Standard
<main>
Living Standard  
HTML 5.1
<main>
Recommendation No change from HTML5.
HTML5
<main>
Recommendation Initial definition.

浏览器支持

<main>标签被广泛支持(除了IE. 建议直到<main>元素被IE 浏览器所支持,  "main" ARIA 语义 才会加入 <main> 元素:

<main role="main">
  ...
</main>

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
mainChrome Full support 26Edge Full support 12Firefox Full support 21IE No support NoOpera Full support 16Safari Full support 7WebView Android Full support YesChrome Android Full support YesEdge Mobile Full support 12Firefox Android Full support 21Opera Android Full support YesSafari iOS Full support 7.1Samsung Internet Android Full support Yes

Legend

Full support  
Full support
No support  
No support

参见

文档标签和贡献者

标签: 
最后编辑者: sun_all,