Breadcrumb Content

Main Content

The main element

September, 26, 2014 | HTML

I’ve been using HTML5 tags for at least three years now and still have to deal with disputes regarding the use of the <section></section> element. I prefer to wrap my main content such as blog posts and sidebars within the section area. The blog posts are wrapped in the article tag and my sidebar is in the aside tag. I like to think of that particular group as an individual section of the web page. An area that is not part of the header, or footer tags. Some would consider this approach as incorrect markup, and that I should do it this way or that way. I don’t really care at this point. With all of the bitching and cat fighting that goes on, I’m starting to see the glass as “half empty”. However, the plot thickens, as we are introduced to  the “main” element.

Not too long ago, I received one of numerous newsletters from Sitepoint informing front-end devs and designers about the approval of the <main></main> element. I began to feel optimistic again, until I decided to research the spec at W3C and WHATWG.

W3 states:

Authors must not include more than one main element in a document.

Authors must not include the main element as a descendant of an article, aside, footer, header or nav element.

This actually makes sense to me.

WHATWG states:

The main element is distinct from the section and article elements in that the main element does not contribute to the document outline.

There is no restriction as to the number of main elements in a document. Indeed, there are many cases where it would make sense to have multiple main elements. For example, a page with multiple article elements might need to indicate the dominant contents of each such element.

Part of this makes sense and rest gets a bit hazy for me. Why does progress have to be so arduous?

Mr. Blox

I dream in code, find conformity repulsive and drink excessive amounts of coffee...

3 Responses to “The main element”

  1. Big Z

    September 26, 2014

    I would not recommend using it without a polyfill. It can make your layout more semantic, outside of that it’s not that big of a deal.

  2. Amanda

    September 29, 2014

    Honestly, I still use div tags. Its a pain having to deal with the inconsistency.

  3. Heather

    September 29, 2014

    This isn’t new, W3C and WHATWG have never agreed on anything.