main

<main>

HTML Main元素(<main>)呈现了文档<body>或应用的主体部分。主要内容区域由和文档核心主题或应用程序中心功能直接相关与扩展的内容组成。

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

内容类别	Flow content, palpable content.
允许的内容	Flow content.
标记遗漏	没有; 起始和结束标签都是强制性的。
允许父级	任何接受流内容的元素（WHATWG）。但是，W3C规范不允许将<main>用作<article>，<aside>，<footer>，<header>或<nav>的后代。
允许ARIA角色	主要角色默认应用于<main>，并且演示角色也是允许的。
DOM界面	HTML元素

属性

这个元素只包含全局属性。

使用说明

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

<main>对文件大纲没有贡献; 也就是说，不像像元素这样的<body>标题<h2>，<main>并不会影响DOM的页面结构的概念。这是严格的信息。

WHATWG和W3C规范之间的差异

WHATWG的现行标准（MDN规范中使用的规范）和W3C规范<main>之间的元素定义有很大不同。与上面给出的描述相比，这里是两个规格之间的差异：

尽管HTML的WHATWG现行标准允许<main>在一个页面中使用多个元素，但W3C版本的规范并不包含这些元素，除非其中一个元素使用该hidden属性隐藏。

WHATWG规范允许<main>在任何允许流量内容的地方使用。在另一方面，HTML规范的W3C版本不允许<main>是的后裔<article>，<aside>，<footer>，<header>，或<nav>。

这似乎是一个短小的差异，但是这个<main>元素在功能层面上是相当简单的，所以如果你不记住这些差异的话，那么这些差异的存在会产生重大的后果。

例子

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

规范

Specification	Status	Comment
HTML Living StandardThe definition of '<main>' in that specification.	Living Standard	Removed the restriction about using <main> multiple times in a document, or as a descendent of an <article> element.
HTML 5.1The definition of '<main>' in that specification.	Recommendation	No change from HTML5.
HTML5The definition of '<main>' in that specification.	Recommendation	Initial definition.

浏览器兼容性

The <main> element is widely supported. For Internet Explorer 11 and below, it is suggested that an ARIA role of "main" be added to the <main> element to ensure it is accessible (screen readers like JAWS, used in combination with older versions of Internet Explorer, will be able to understand the semantic meaning of the <main> element once this role attribute is included).

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

Feature	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari
Basic Support	26	12	21	No	16	7

Feature	Android	Chrome for Android	Edge mobile	Firefox for Android	IE mobile	Opera Android	iOS Safari
Basic Support	(Yes)	(Yes)	12	21	No	(Yes)	7.1