When was the last time we received a new element? HTML5 introduced just nine new structural tags and they’ve been stable for several years: section , article , aside , hgroup , header , footer , nav , figure and figcaption . There are another 20 or so content elements including video , audio , canvas , progress etc.

Today, we have a new structural element to learn: <main> According to the recent W3C specification:

The main element represents the main content of the body of a document or application. The main content area consists of content that is directly related to or expands upon the central topic of a document or central functionality of an application. 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.

main marks the meaty content within your page, i.e. the target of a “skip to” link. You’ll probably use main where you had a content wrapper before; it will replace tags such as <div id="main"> , <div id="page"> or <div id="wrapper"> . If you’re using ARIA, you’d use it for the element where role="main" is defined…

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Using main</title> </head> <body> <header>My page</header> <nav> <a href="#">Home</a> </nav> <main> <article> <h1>My article</h1> <p>Content</p> </article> <aside> <p>More information</p> </aside> </main> <footer>Copyright 2013</footer> </body> </html>

Browser Support

While main is new, most browsers support unrecognized tags. However, you will need to apply a block style in your CSS, i.e.

main { display: block }

This is may become unnecessary as browsers evolve ( main is supported in Chrome and Firefox nightly builds), but there’s little harm retaining it.

The element’s also been added to the html5shiv so it will work in IE6, 7 and 8. You may need to download the new version if you’re using a locally-hosted file.

Can you use <main> today?

The element has been surprisingly controversial. It’s been argued that it’s unnecessary and pages should permit more than one main tag. But it’s here to stay and I think it will be useful. Just ensure you’ve thoroughly tested your new site prior to going live!

And if you enjoyed reading this post, you’ll love Learnable; the place to learn fresh skills and techniques from the masters. Members get instant access to all of SitePoint’s ebooks and interactive online courses, like HTML5 & CSS3 For the Real World.

Comments on this article are closed. Have a question about HTML5? Why not ask it on our forums?