When can I safely use the new <main> element in HTML5?

Question

On the 16th December, a HTML5 extension specification for the <main> element was submitted to the W3C under something called an editors draft. The abstract is as follows:

This specification is an extension to the HTML5 specification [HTML5]. It defines an element to be used for the identification of the main content area of a document. All normative content in the HTML5 specification, unless specifically overridden by this specification, is intended to be the basis for this specification.

The main element formalises the common practice of identification of the main content section of a document using the id values such as 'content' and 'main'. It also defines an HTML element that embodies the semantics and function of the WAI-ARIA [ARIA] landmark role=main.

Example:

<!-- other content -->

<main>

  <h1>Apples</h1>
 <p>The apple is the pomaceous fruit of the apple tree.</p>

 <article>
 <h2>Red Delicious</h2>
  <p>These bright red apples are the most common found in many
  supermarkets.</p>
  <p>... </p>
  <p>... </p>
  </article>

  <article>
  <h2>Granny Smith</h2>
  <p>These juicy, green apples make a great filling for
  apple pies.</p>
  <p>... </p>
  <p>... </p>
  </article>

</main>

<!-- other content -->

It's got all the info in there and I feel I should start incorporating it into web pages. As far as I know now, the HTML5 spec is just progressive with new features been "bolted" on to the spec with no upgrade. I guess that means the browsers will start implementing it when they can - the question is, how long does this take and how do I know all browsers support it? Should I just build it like so for now and resort to a polyfill?

Answer 1

Support for <main> will be much like support for any other new container element introduced in HTML 5.

• New enough browsers will support it.
• Older browsers will let you style it so it is display: block and give you the visual effects of it
• Older versions of IE won't support it at all without a JavaScript shim (which will work in exactly the same way as the ones for all the other new container elements).

The "when" depends on what level of browser support you need and how willing you are to depend on a JS shim.