HTML5 Main Element
By Michael WalshPublished
A quick look at the new HTML5 <main> element and how to implement it.
The HTML5 <main> element seems to have crept into the W3C HTML specification with little fanfare. Despite the fact that it’s probably one of the elements HTML has been lacking most, particularly from an accessibility perspective.
It’s very simple to implement, with some common sense rules. In my experience it’s been very quick to change the element that has the ARIA’s landmark role of “main” in our markup to the new <main> element.
The rules to obey when implementing the <main> element are:
- You can only include one main element per document - although this is currently a point of contention so may change.
- It cannot be used as a child of an
<article>,<header>,<footer>,<aside>, or<nav>element.
Because <main> isn’t sectioning content, it doesn’t affect the document outline in the same way <article>, <nav>, or <section> do.
