The <main> element is a proposed element to represent your main content in the body. Up until now it was usually done with a <div role="main">. It was recently added to the HTML5 specification, but is it safe to use today, and if so, should you use it?
There are a lot of great posts around the web discussing the new element. If you want to know what the element is for, you can read Ian Devlin’s recent post, it explains in short why it’s added to the spec and how you can use it. I’m not going in to that, I want to know if I can use it already and what can go wrong if I implement it today.
Browser support
It won’t be a shock to you that no browsers support the <main> element. But what does that mean? What happens if a browser finds an unknown element?
Not long ago we encountered the same questions when the first new semantic elements were added to the spec. We wanted to use elements like <article> and <section>, but weren’t sure of the consequences. Nicholas C. Zakas wrote an article about using those elements and the possible problems. Today a lot of solutions have been made, like Modernizr or HTML5Shim. Those same solutions can be applied for the <main> element as well. Some already work and some need a little bit of tweaking. I suggest sticking to your current solution and alter if necessary.
That solves the IE problem of not rendering the element. But all unknown elements have no default styling and are by default inline. So if you’re going to use it, don’t forget to add display: block; to your CSS.
Accessibility
That solves the rendering problems, but what about accessibilty? One of the reasons for the new semantic elements is easier implementations for screen readers and other accessibility tools. But as long as browsers haven’t implemented the element, screen readers won’t either. But what are you using at this moment for the main element in your body? I’m using the WAI-ARIA role ‘main’, just like many others. So as long as most screen readers haven’t implemented the element, you can always add the ARIA role to the element: <main role="main">.
It’s a bit repetitive, but it does work. It is not much different then a <div role="main">, but it’s future proof, more semantic and stylable in CSS with main { }.
Should I use it?
Is it safe? Yes. Is it more semantic? Yes. Is it still accessible? Yes. So should you use it? Well… maybe.
As with every new thing in HTML or CSS, the specs could change swiftly. The <time> element has been changed, removed, added again, changed again. So old implementations are probably wrong, but the sites aren’t broken. So it’s a bit of a guess. If you want to be really safe, then don’t use it. If you really want to use it, then do, it won’t harm your website in any great way if it’s removed.
Let me know your thoughts, why you implement it, or why not.
You can use it very soon: https://developer.mozilla.org/en-US/docs/HTML/Element/main