首页
学习
活动
专区
工具
TVP
发布

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

扫码关注腾讯云开发者

领取腾讯云代金券