试一试
<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 |
浏览器兼容性
加载中…