我們的志工尚未將本文翻譯為 正體中文 (繁體) 版本。加入我們,幫忙翻譯!
您也可以閱讀本文的 English (US) 版本。

The HTML <main> element represents the main content of the <body> of a document, portion of a document, or application. The main content area consists of content that is directly related to, or expands upon the central topic of, a document or the central functionality of an application.

You can use multiple <main> elements within the same page when it makes sense to do so. For instance, if you have a page presenting multiple articles (each inside an <article> element, each of which has some extra material within (such as toolbars for editing, ads, and so forth), it may make sense to include a <main> element within each article to identify the primary contents of that specific article.

Content categories Flow content, palpable content.
Permitted content Flow content.
Tag omission None; both the starting and ending tags are mandatory.
Permitted parents Any element that accepts flow content (WHATWG). However, the W3C specification doesn't permit <main> to be used as a descendant of  <article>, <aside>, <footer>, <header>, or <nav>.
Permitted ARIA roles The main role is applied to <main> by default, and the presentation role is permitted as well.
DOM interface HTMLElement

Attributes

This element only includes the global attributes.

Usage notes

The content of a <main> element should be unique to the document or section the element contains. Content that is repeated across a set of documents or document sections such as sidebars, navigation links, copyright information, site logos, and search forms should not be included unless the search form is the main function of the page.

<main> doesn't contribute to the document's outline; that is, unlike elements such as <body>, headings such as <h2>, and such, <main> doesn't affect the DOM's concept of the structure of the page. It's strictly informative.

Differences between the WHATWG and W3C specifications

The <main> element's definition is substantially different between WHATWG's living standard—which is the specification MDN uses by convention—and the W3C specification. As compared to the description given above, here are the differences between the two specifications:

This seems like a short set of differences, but the <main> element is quite simple at a functional level, so the existence of these differences can have significant consequences if you don't keep them in mind.

Example

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

Specifications

Specification Status Comment
HTML Living Standard
The 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.1
The definition of '<main>' in that specification.
Recommendation No change from HTML5.
HTML5
The definition of '<main>' in that specification.
Recommendation Initial definition.

Browser compatibility

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>

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support261221 No167
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidIE mobileOpera AndroidiOS Safari
Basic support Yes Yes1221 No Yes7.1

See also