HTML5 Development Center

Developed for you in part by
 
472-html5-logo

Introducing the New HTML5 <main> Element

By | February 8, 2013 | Accessibility | HTML | HTML5 | News | Web standards

33

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!

Craig Buckler

Craig is a Director of OptimalWorks, a UK consultancy dedicated to building award-winning websites implementing standards, accessibility, SEO, and best-practice techniques.

More Posts - Website

Tagged as: HTML5 Dev Center, HTML5 Tutorials & Articles

{ 33 comments }

Prabir March 6, 2013 at 11:16 am

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

ppjm February 15, 2013 at 5:52 pm

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.

Akram Taghavi-Burris February 16, 2013 at 8:15 am

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 February 16, 2013 at 9:27 am

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).

jim February 14, 2013 at 1:02 pm

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.

Pulak February 14, 2013 at 10:28 am

Is this element going to help in SEO?

Jack Saat February 14, 2013 at 3:04 pm

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 February 15, 2013 at 3:06 am

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

Cubicle Ninjas February 13, 2013 at 3:12 am

Wow, I really like this addition to the spec.

Jitendra Vyas February 13, 2013 at 2:17 am

What will happen with single page website?

steve faulkner February 13, 2013 at 6:36 am

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

Jitendra Vyas February 14, 2013 at 10:10 pm

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

Craig Buckler February 15, 2013 at 2:41 am

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.

Matt Early February 11, 2013 at 1:59 pm

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 February 11, 2013 at 11:35 pm

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

Craig Buckler February 15, 2013 at 2:43 am

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!

Karen February 21, 2013 at 2:28 pm

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

Patrick Samphire February 24, 2013 at 2:02 am

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

steve faulkner February 11, 2013 at 5:50 am

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.

Emil February 9, 2013 at 10:54 pm

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

Christian February 14, 2013 at 10:00 am

I don’t see anyone recommending that.

fjpoblam February 9, 2013 at 9:32 am

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 February 10, 2013 at 12:41 am

@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.

Christian February 14, 2013 at 10:08 am

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.

Patrick Samphire February 24, 2013 at 2:06 am

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.)

Web Axe February 8, 2013 at 3:20 pm

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 February 13, 2013 at 3:56 am

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

Kenny Landes February 8, 2013 at 2:45 pm

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.

Ray February 8, 2013 at 10:46 am

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 ?

David February 8, 2013 at 9:37 am

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.

Don February 8, 2013 at 8:43 am

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

Craig Buckler February 8, 2013 at 9:55 am

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 February 8, 2013 at 2:17 pm

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 )

Comments on this entry are closed.