©
本文档使用
php中文网手册 发布
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 |