The HTML <main>
element represents the main content of the <body>
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. This content should be unique to the document, excluding any content that is repeated across a set of documents such as sidebars, navigation links, copyright information, site logos, and search forms (unless the document's main function is as a search form).
Content categories | Flow content, palpable content. |
---|---|
Permitted content | Flow content. |
Tag omission | None; both the starting and ending tags are mandatory. |
Permitted parent elements | Any element that accepts flow content. |
DOM interface | HTMLElement |
Attributes
This element only includes the global attributes.
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 |
---|---|---|
WHATWG 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. |
HTML5.1 The definition of '<main>' in that specification. |
Working Draft | 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>
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
Basic support | Chrome 26 | 21.0 (21.0) | 12 | Opera 16 | Safari 7 |
Feature | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | 4.4 | 21.0 (21.0) | No support | No support | 7.1 |
See also
- Basic structural elements:
<html>
,<head>
,<body>
- Section-related elements:
<article>
,<aside>
,<footer>
,<header>
, or<nav>