Introducing the New HTML5 <main> Element

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?

Win an Annual Membership to Learnable,

SitePoint's Learning Platform

  • Don

    At 46 I am back in school studying Interactive Media. We are using HTML 5 in a lot of our work. I like this “main” tag. You mention that this could be or should be used in place of is there another use for it? Don’t most people use the “wrapper” id to contain the entire site including nav, footer, article, and aside? With your example it is now contained within the body of the page. Would it be best to use “body” as the wrapper now? I could be wrong in the way I am asking the question. Any insight would be great!

    Don

    • http://www.optimalworks.net/ Craig Buckler

      There are no set rules where wrappers are concerned. They’re mainly used to aid CSS styling so, if you don’t need them, you shouldn’t add them. You normally can’t use the body as a wrapper because it’s dimensions are set by the browser window.

    • Steve Faulkner

      Hi Don

      “Don’t most people use the “wrapper” id to contain the entire site including nav, footer, article, and aside?”
      Authors use many divs and other elements with id and classes to do all sorts of things. The main element is based on data that showed a large proportion of authors used typically a div with an id=main to contain the main content area of a page excluding header, footer and navigation content etc. If you follow the link at the start of this article to the main element’s definition in HTML, information about when and how it can be used is provided. If it is still unclear feel free to provide feedback (details on how are provided at the start of the HTML 5.1 specification: http://www.w3.org/html/wg/drafts/html/master/Overview.html )

  • David

    The element has been surprisingly controversial. It’s been argued that it’s unnecessary and pages should permit more than one main tag.

    The main use would seem to me to be to isolate just the content of the page (for instance if you were to print or project a page, you don’t want things like the Navigation Section or header/footer information). As such it would seem to me that you only want one per “normal” page. Would save me from having to use the Print Edit add-in on Firefox.

  • http://raym31.home.comcast.net Ray

    Um, if there is only one MAIN allowed, why would the aside tag be included within the element (as shown in the example) other than for styling (float containment as such) purposes ?

  • Kenny Landes

    I have been using section where main will now fit perfectly since I only ever used one section element per document. So I can now properly use section as intended to section content in the document outline.

    The element I’m interested in is container, even if it is mainly used for presentational purposes. It would be nice to have an element to style directly instead of using div id/class=”container”. It seems like where there is such common usage of generics, there is a reasonable argument for a dedicated element, but that’s my tangent.

  • http://www.webaxe.org Web Axe

    For now, ensure you include the ARIA landmark of “main” with the main element. Example: <main role=”main”>.

    PS:
    Diagram of other common landmark roles:
    http://www.flickr.com/photos/odmag/8034463748/

    • ralph.m

      Three cheers for ARIA roles, a vastly better solution than these HTML5 elements.

  • fjpoblam

    Hmm… Let’s say I have a simple-minded website (one of which, I do). It consists of, merely, header, nav, article, footer. All the same (elastic) width. A “main” surrounding the (single) article, perhaps used as a target for a hidden skip-links, would seem superfluous, no? Or is this a proper “requirement” for “semantic” purposes? (In my pea brain, the “main” in this case seems to be merely cosmetic.)

    • Steve Faulkner

      @fjpoblam

      I would suggest it is the article that is superfluous, the main element is an explicit semantic identifier of the main content area of a page, article is not.

    • http://resume.christianziebarth.com Christian

      The inclusion of MAIN (yes, I am okay with referring to HTML elements in uppercase when not within an XHTML document) seems like a very logical step forward and I’m surprised it wasn’t done at the same time as NAV, HEADER and FOOTER because it’s the same type of concept. ARTICLE, however, was not replacing (as far as I know) any typically used naming convention for DIV’s. Or perhaps I was missing that was a popular thing?

      Now, I don’t know that ARTICLE has become useless but with the advent of MAIN developers should make extra sure that whatever they are wrapping around is content that can accurately be characterized as an article.

      • http://www.50secondsnorth.com Patrick Samphire

        Unless I’m misunderstanding this, I don’t think MAIN makes ARTICLE redundant on most pages. A very simple page, yes, but in most pages, MAIN would wrap the ARTICLE(S), SECTION(S) and ASIDE(S). There’s still room for the ASIDE tag. (As an aside, should MAIN really wrap an ASIDE? Not sure whether that makes sense or not.)

  • Emil

    header with id header, footer with id footer, nav with id nav and now main with id main… wonder whats next….

    • Christian

      I don’t see anyone recommending that.

  • steve faulkner

    If you have ffedback on the main element in particular or other features, I have provided some information on how and where you can direct feedback on the HTML specification: On joining the HTML editors team.

  • http://www.mattearly.com Matt Early

    Could they have not called the element, “MEAT” instead of “MAIN”?
    I’m happy to see all of the main browsers have taken so quickly to it.

    • steve faulkner

      too bad you weren’t involved in the element naming discussion :-)

    • http://www.optimalworks.net/ Craig Buckler

      It’s a nice idea but, in general, HTML5 elements have been named after the IDs developers used, e.g. id=”header”, id=”footer”, etc. I don’t think I ever used id=”meat” … although I might start now!

    • http://l4jp.com Karen

      In that case, perhaps “aside” should have been called “potatoes”! ;-)

    • http://www.50secondsnorth.com Patrick Samphire

      As a vegetarian, I think I would have had to give up web design…

  • http://twitter.com/jitendravyas Jitendra Vyas

    What will happen with single page website?

    • steve faulkner

      don’t understand your question can you point to an example?

      • http://twitter.com/jitendravyas Jitendra Vyas

        For example if I have multiple main content areas like this http://jquerymobile.com/test/docs/pages/multipage-template.html

      • http://www.optimalworks.net/ Craig Buckler

        With regard to mobile single-page sites, you’re mainly talking about applications so SEO is low down the agenda.

        For other single-page sites, I’d suggest an outer main element with a multitude of article elements. Job done. However, if SEO’s your priority, you’re probably better off using multiple pages with separate keyword-rich URLs.

  • http://cubicleninjas.com Cubicle Ninjas

    Wow, I really like this addition to the spec.

  • http://pulakonline.blogspot.in/ Pulak

    Is this element going to help in SEO?

    • http://webtekmedia.com/ Jack Saat

      Maybe one day, it will be a easy way for the search bot to find the main content of the page if people will make use of it a lot! Its also a real semantic tag!

    • steve faulkner

      search vendor reps I have talked to have indicated they will likely take it into account in their search algorithms.

  • jim

    Pohtaytoh .. pahtahtoh … MAIN and it’s ilk are just the latest results of a general malaise now pervading society, especially the younger elements, that SINCE one can change stuff, one SHOULD change stuff and therefore one WILL change stuff and the rest of Y’ALL have to go along or y’all won’t be cool / hip / whatever-de-jour … as usual, it’s just fun to sit back and watch the ants scurrying around.

  • ppjm

    Sorry – last post got mangled with the removal of my tags. Trying again:

    Love the idea of [div], it will allow screen readers and other linear devices to skip straight to the content of the document, eventually obviating entirely the need for skiplinks and other such navigational crutches. It will also simplify browser scripting, web applications, browser extensions, etc. It will also improve the semantic clarity of web pages; spiders will have guaranteed signposting to what the page is really about.

    Went to try it out, though, but got the following error from the W3C validator:
    ” Element main not allowed as child of element div in this context.”

    Unless I’m missing something, the validator complains that the [main] element is wrapped in a pair of [div] elements. These were [div id='container'] and [div id='bg'], both entirely for presentational purposes, a central column presentation and background image, respectively.

    I can understand the intention that [main] should not be the child of another block element with a top level semantic, such as [header] or [nav], as that would clearly negate the purpose and meaning of [main]. I think it is a mistake, though, to preclude being wrapped in one or more [div] tags. Surely in html5, the chief purpose of div is to provide a hook for block level presentation and scripting, and that wrapping a [main] with a [div] for this reason does not contradict the meaning of [main]?

    Perhaps someone considers CSS3 to provide adequate possibilities, so that people shouldn’t need this sort of littering the web. Nevertheless, I feel this purism creates a barrier (albeit small in many cases) to the rollout of in existing sites.

    • http://www.akramsideas.com Akram Taghavi-Burris

      I think it’s a mistake on the vaildators part. I get the same errror when the element is in just in the body. The error reads that it can not be a “child element of body”, that just doesn’t make sense. Thus I would assume the vaildators programming just hasn’t been updated to recognize the element yet.

    • steve faulkner

      main is not supported yet by the W3C validator, it does not mean it is not valid, it just means that the validator has not yet been updated to recognise it yet. Mike [tm] Smith is implementing new stuff in the W3C validator. I am on his case about getting main checking implemented (as well as other stuff).

  • Prabir

    I would have loved to name it as ‘wrapper’ than ‘main’