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:
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:
For older versions of Internet Explorer, add this to your script.
now includes <main>, so make sure you have a current version of that if you are hosting it on your own server.
You can see a couple of code examples demonstrating appropriate use of the <main> element on this W3C page.
One thought on “Main element added to HTML 5.1”
Thanks for sharing and good explanation.