The New HTML5 <main> Element

For those of you who haven’t yet heard, the W3C just announced the new <main> element. As the name suggests, the purpose of the element is to identify the main content of a page. To that end, you are only allowed one <main> element per page, and the <main> element cannot be a descendant of any of the following elements: <article><aside><footer><header>, or <nav>.

Since modern browsers allow the use of any tag you want, you can start using <main> today. Just be sure to define it as a block element in your css: main{ display: block; }. If you care about supporting IE8 and below, you can either use the html5shiv, or add it yourself with a quick bit of Javascript: document.createElement('main');

So how might we actually use the <main> element? What does it mean for it to contain the “main” content of a page? Here’s what the W3C has to say about it:

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.
W3C HTML Editor’s Draft

I guess I might interpret this one of two ways. One take is that it should be the main wrapper that usually gives the content of the site its width and often contains the main layout elements, such as the site header, footer, main column, and sidebar(s). The other possibility is that it should be the main column that holds the article or page content only, to the exclusion of the site header, footer, and sidebar(s). To illustrate, a pretty typical site layout might look something like this:

<body>
     <div class="wrapper">
          <header></header>
          <div class="main-wrap"></div>
          <aside class="sidebar"></aside>
          <footer></footer>
     </div>
</body>

The first interpretation I outlined might do away with the wrapper div and replace it with the <main> element to change the code to this:

<body>
     <main>
          <header></header>
          <div class="main-wrap"></div>
          <aside class="sidebar"></aside>
          <footer></footer>
     </main>
</body>

The <main> element now includes the contents of the site header, footer, and sidebar. I would argue that those elements all step outside of the content that is directly related to or expands upon the central topic of a document that <main> represents. The topic of the document is whatever the page or article itself addresses, and does not include global site elements.

So does that mean that we should keep the wrapper as a div? In the past, I would have said yes, though I never would have been very happy about it in terms of semantics. Recently though, while researching some of these semantics issues at HTML5 Doctor, I came across a link to an article from Camen Design about the use of the <body> tag for this sort of thing. It really makes a great deal of sense over just using the body as an extra useless layer within the <html> tag. Suddenly it actually delineates the actual body of the document instead of just wrapping everything that isn’t the header, which is all it is doing in the above examples. I’ve yet to use this in any of my own work, but will be doing so with all haste.

So where does that leave us with the <main> tag? I think that the most semantic use would be:

<body>
     <header></header>
     <main></main>
     <aside class="sidebar"></aside>
     <footer></footer>
</body>

See how nice and readable that is? And it is just as readable to browsers as to humans, which means that computers can truly make sense of your content without having to sort through a bunch of cruft.

Leave a Reply