HTML <main> 元素

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

使用 <main> 将文章列表包含起来：

<main>
  <h1>网页浏览器</h1>
  <p>Google Chrome，Firefox 和 Internet Explorer 是当今最常用的浏览器。</p>

  <article>
    <h1>Google Chrome</h1>
    <p>Google Chrome 是由 Google 开发的免费开源网络浏览器，于 2008 年发布。</p>
  </article>

  <article>
    <h1>Internet Explorer</h1>
    <p>Internet Explorer 是微软 1995 年发布的免费网络浏览器。</p>
  </article>

  <article>
    <h1>Mozilla Firefox</h1>
    <p>Firefox 是 2004 年 Mozilla 发布的免费开源 Web 浏览器。</p>
  </article>
</main>

尝试一下 »

截图

使用 <main> 将文章列表包含起来

您可以在同一页面中使用多个 <main> 元素，只要这样做是有意义的。例如，如果您有一个页面展示多篇文章（每个都包含一个 <article> 元素，每篇文章都有一些额外的内容（例如用于编辑，广告等的工具栏）），这样可以在每篇文章中包含一个 <main>，以确定该具体文章的主要内容。

特性

内容类别 流式内容，可触知内容。
允许的内容 流式内容。
标签省略 不允许，开始标签和结束标签都不能省略。
允许的父元素 任何接受流式内容的元素（WHATWG）。然而，W3C 规范不允许将 <main> 用作 <article>，<aside>，<footer>，<header> 或 <nav> 的后代。
允许的 ARIA 角色 <main> 元素默认就有 main 角色，同时也允许使用 presentation 角色。
DOM 接口 HTMLElement

属性

该元素只包含全局属性。

事件属性

<main> 元素支持 HTML 的事件属性。

使用注意

<main> 元素的内容应该在文档或章节中是唯一的。不应该包含跨一组文档或文档部分（如侧边栏，导航链接，版权信息，网站 Logo 和搜索表单）的重复内容，除非其中的搜索表单是当前页面的主要内容。

<main> 对文档的大纲没有影响；也就是说，与 <body>，诸如 <h2> 标题等等的元素不同，<main> 不会影响页面结构的 DOM 概念。

WHATWG 和 W3C 规范之间的差异

<main> 元素的定义在 WHATWG 的现行标准（这是 MDN（Mozilla 开发者网络）按照惯例使用规范）和 W3C 规范大不相同。与上面给出的描述相比，这两个规范之间的区别是：

这似乎是一小段差异，但是在功能层面上，<main> 元素是非常简单的，所以如果不牢记这些差异，这些差异的存在就会产生重大后果。

更多实例

使用 <main> 展示文章列表

<!-- 其他内容 -->

<main>
  <h1>苹果</h1>
  <p>苹果是苹果树的果子。</p>

  <article>
    <h2>蛇果</h2>
    <p>这些明亮的红苹果是许多超市中最常见的。</p>
    <p>... </p>
    <p>... </p>
  </article>

  <article>
    <h2>青苹果</h2>
    <p>这些多汁的绿色苹果对苹果派来说是一个很好的补充。</p>
    <p>... </p>
    <p>... </p>
  </article>
</main>

<!-- 其他内容 -->

尝试一下 »

规范

规范 状态 备注
HTML Living Standard
<main> 的定义		 现行的标准 删除了不能在文档中多次使用 <main> ，和不能作为 <article> 元素的后代的限制。
HTML 5.1
<main> 的定义		 推荐 自从 HTML5 没有更改。
HTML5
<main> 的定义		 推荐 初始定义。

浏览器兼容性说明

<main> 元素有着广泛的支持。对于 Internet Explorer 11 及更低版本，建议为 <main> 元素的 ARIA 角色添加 "main"，以确保无障碍访问（像 JAWS 这样与旧版本的 Internet Explorer 结合使用的屏幕阅读器，一旦包含了这个 role 属性，就能够理解 <main> 元素的语义。

为 <main> 元素增加 "main" 角色

<main role="main">
  这里是主体内容。
</main>

尝试一下 »

桌面浏览器兼容性

特性 Chrome Edge Firefox Internet Explorer Opera Safari
基础支持 26 12 21 不支持 16 7

移动浏览器兼容性

特性 Android Chrome for Android Edge mobile Firefox for Android IE mobile Opera Android iOS Safari
基础支持 支持 支持 12 21 不支持 支持 7.1

相关链接