试一试
<header>Gecko facts</header>
<main>
<p>
Geckos are a group of usually small, usually nocturnal lizards. They are
found on every continent except Antarctica.
</p>
<p>
Many species of gecko have adhesive toe pads which enable them to climb
walls and even windows.
</p>
</main>
header {
font:
bold 7vw "Arial",
sans-serif;
}
文档中不能有多个带有 <main> 元素的实例，除非这些元素都指定了 hidden 属性。
属性
此元素仅包含全局属性。
用法说明
<main> 元素的内容应该是文档独有的。不应包含在文档集或文档节中重复的内容，例如侧边栏、导航链接、版权信息、网站徽标和搜索表单，除非搜索表单是页面的主要功能。
<main> 不计入文档的大纲；也就是说，与 <body>、标题（如 h2）等元素不同，<main> 不会影响 DOM 对页面结构的理解。它纯粹是信息性的。
无障碍
地标
<main> 元素表现得像一个 main 地标角色。 地标可以被辅助技术使用，以便快速识别文档的大部分内容并进行导航。优先使用 <main> 元素而不是声明 role="main"，除非有 旧浏览器支持方面的顾虑。
跳过导航
跳过导航，也称为“skipnav”，是一种技术，允许辅助技术用户快速绕过大段重复内容（主导航、信息横幅等）。这使得用户可以更快地访问页面的主内容。
为 <main> 元素添加 id 属性可以使其成为跳过导航链接的目标。
html
<body>
<a href="#main-content">Skip to main content</a>
<!-- navigation and header content -->
<main id="main-content">
<!-- main page content -->
</main>
</body>
阅读模式
示例
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 -->
结果
技术摘要
| 内容类别 | 流内容，可感知内容。 |
|---|---|
| 允许内容 | 流内容. |
| 标签省略 | 无；起始标签和结束标签都是必需的。 |
| 允许父级 | 在期望 流内容 的地方，但前提是它是一个 层级结构正确的 main 元素。 |
| 隐式 ARIA 角色 |
main
|
| 允许的 ARIA 角色 | 不允许 role |
| DOM 接口 | HTMLElement |
规范
| 规范 |
|---|
| HTML # the-main-element |
浏览器兼容性
加载中…