The main element

Categories:
Flow content.
Palpable content.
Contexts in which this element can be used:
Where Flow content is expected, but with no article, aside, footer, header or nav element ancestors.
Content model:
Flow content.
Content attributes:
Global attributes
DOM interface:
Uses HTMLElement.

The main element represents the main content section of the body of a document or application. The main content section consists of content that is directly related to or expands upon the central topic of a document or central functionality of an application.

Note: the main element is not sectioning content and has no effect on the document outline

The main content section of a document includes content that is unique to that document and excludes content that is repeated across a set of documents such as site navigation links, copyright information, site logos and banners and search forms (unless the document or applications main function is that of a search form).

Authors MUST NOT include more than one main element in a document.

Authors MUST NOT include the main element as a child of an article, aside, footer, header or nav element.

Note: Authors are advised to use ARIA role="main" attribute on the main element until user agents implement the required role mapping.


<main role="main"> 

... 

</main>

Code examples

In the following example, we see 2 articles about apples (the main topic of a Web page) the main topic content is identified by the use of the main element.

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

Here is a graduation programme the main content section is defined by the use of the main element. Note in this example the main element contains a nav element consisting of links to sub sections of the main content.

<!DOCTYPE html>
<html>
<head>
<title>Graduation Ceremony Summer 2022</title>
</head>
<body>

<header>The Lawson Academy:
<nav>
<ul>
<li><a href="courses.html">Courses</a></li>
<li><a href="fees.html">Fees</a></li>
<li><a>Graduation</a></li>
</nav> 
</header>


<main>

<h1>Graduation</h1>

<nav>
<ul>
<li><a href="#ceremony">Ceremony</a></li>
<li><a href="#graduates">Graduates</a></li>
<li><a href="#awards">Awards</a></li>
</nav>

<H2 id="ceremony">Ceremony</H2>
<p>Opening Procession</p>
<p>Speech by Valedictorian</p>
<p>Speech by Class President</p>
<p>Presentation of Diplomas</p>
<p>Closing Speech by Headmaster</p>

<h2 id="graduates">Graduates</h2>
<ul><li>Clara Faulkner</li>
<li>Anastasia Luccio</li>
<li>Ebenezar McCoy</li>
<li>Karrin Murphy</li>
<li>Eloisa Faulkner</li>
<li>Susan Rodriguez</li>
</ul>

<h2 id="awards">Awards</h2>
<ul><li>Clara Faulkner</li>
<li>Eloisa Faulkner</li>
<li>Karrin Murphy</li>
<li>Susan Rodriguez</li>
</ul>

</main>


<footer> Copyright 2012 B.lawson</footer>

</body>
</html>

Guidance for User Agents and HTML specification editors

User agents MUST map the main element to the ARIA landmark role of main.

User agents that support keyboard navigation of content are strongly encouraged to provide a method to navigate to the main element and once navigated to, ensure the next element in the focus order is the first focusable element within the main element. This will provide a simple method for keyboard users to bypass blocks of content such as navigation links.

Remove the section of the HTML5 specification titled 4.13.1 The main part of the content, as this specification makes the content of the cited section no longer applicable.

Rendering

This section is to be treated as a subsection of HTML's Rendering section for the purpose of terminology, conformance classes and requirements.

CSS:

The User Agent style sheet SHOULD include the following style rule for the main element:

 @namespace url(http://www.w3.org/1999/xhtml);  
     
   main { unicode-bidi: isolate; display: block; }

":not(main)" SHOULD be added to 10.3.5 Bidirectional style rule in the HTML5 spec:

:matches([dir=ltr i], [dir=rtl i], [dir=auto i])
:not(address):not(blockquote ):not(center):not(div):not(figure):not(figcaption):not(footer):not(form ):not(header):not(hr):not(legend):not(listing):not(p):not(plaintext):not(pre ):not(summary):not(xmp):not(article):not(aside):not(main) :not(h1):not(h2):not(h3):not(h4 ):not(h5):not(h6):not(hgroup):not(nav):not(section):not(table):not(caption ):not(colgroup):not(col):not(thead):not(tbody):not(tfoot):not(tr):not(td ):not(th):not(dir):not(dd):not(dl):not(dt):not(menu):not(ol):not(ul):not(li)

{ unicode-bidi: embed; }

Parsing

This section is to be treated as a subsection of HTML's The rules for parsing tokens in HTML content section for the purpose of terminology, conformance classes and requirements.

The tag name "main" must be added to 8.2.5.4.7 The "in body" insertion mode at the following steps:

A start tag whose tag name is one of: "address", "article", "aside", "blockquote", "center", "details", "dialog", "dir", "div", "dl", "fieldset", "figcaption", "figure", "footer", "header", "hgroup", "main", "menu", "nav", "ol", "p", "section", "summary", "ul"

and

An end tag whose tag name is one of: "address", "article", "aside", "blockquote", "button", "center", "details", "dialog", "dir", "div", "dl", "fieldset", "figcaption", "figure", "footer", "header", "hgroup", "listing","main", "menu", "nav", "ol", "pre", "section", "summary", "ul"

References

Normative references

[HTML5]
Robin Berjon, Travis Leithead, Erika Doyle Navara, Theresa O'Connor, Silvia Pfeiffer. HTML 5 W3C Candidate Recommendation 08 November 2012 URL: http://www.w3.org/html/wg/drafts/html/CR/Overview.html
[RFC2119]
S. Bradner. Key words for use in RFCs to Indicate Requirement Levels. March 1997. Internet RFC 2119. URL: http://www.ietf.org/rfc/rfc2119.txt

Notes

A Rationale / Use Case document for the addition of the main feature to HTML is available.

From publicly reported studies [1] of id values used in HTML content, the use of the strings "content" and "main" are common practice. A recent study has provided data which shows a strong correlation between the use of the aforementioned id values as targets for 'skip links' and also a strong correlation with the use of ARIA role=main on elements having the aforementioned id values.

[1] http://triin.net/2006/06/12/CSS#figure-34, http://westciv.typepad.com/dog_or_higher/2005/11/real_world_sema.html, http://dev.opera.com/articles/view/mama-common-attributes/#id, http://lists.w3.org/Archives/Public/public-html/2012Oct/0109.html

Acknowledgements

Thanks to Mike [tm] Smith, Dave Bolter, Leonie Watson, Gez Lemon, Sarah Bourne, Henri Sivonen, James Craig, Simon Pieters, Mat Marquis, Ian Devlin, Marcos Caceres and many others.

Enabling Funder

The development of this publication is being funded by The Paciello Group. The content of this publication does not necessarily reflect the views or policies of The Paciello Group, nor does mention of trade names, commercial products, or organizations imply endorsement by The Paciello Group.