Main element added to HTML 5.1

The <main> element was added to the HTML 5 specification recently. The element name is pretty obvious in meaning, but just in case you want the W3C’s definition, it is the “main content of the body of a document or application.”

The <main> element can include only content that is unique to a page. Repeating content such as navigation, copyright information or banners do not belong in the <main> element. There can only be one <main> element in a document, and the element should not be a descendant of an <article>, <aside>, or <nav>.

The W3C does suggest that a <main> element could “a grouping content or sectioning content element as appropriate.” I interpret this to mean you can nest a <main> element in a <div> or a <section>. If I’m misunderstanding what this means, I hope someone will speak up with a correction.

Coding with <main> until the new wears off

Until assistive devices include a keyboard command that will move the focus directly to the <main> element, a best practice suggested for accessibility is to include the ARIA role “main” as an attribute of the element. For example:

<main role="main">

Some browsers (and validators) won’t recognize <main> immediately, although browser support is coming quickly. If you start using it now, be sure to include this in your CSS, along with the other HTML5 resets:

main {display:block;}

For older versions of Internet Explorer, add this to your script.

<script>document.createElement('main');</script>

The html5shiv now includes <main>, so make sure you have a current version of that if you are hosting it on your own server.

Code Examples

You can see a couple of code examples demonstrating appropriate use of the <main> element on this W3C page.