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

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

Posted by: admin November 30, 2017 Leave a comment

Questions:

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?

Answers:

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.

Questions:
Answers:

For now, I would be careful about usng it.

For the future of the proposal, what really matters is implementation in browsers. In particular, because <main> is a proposed block level element, it will require a change to the HTML5 parser implementation as well as giving it the default ARIA role of main.

Without the default ARIA role, there is no point to the element, although using it now in preparation for that is a reasonable approach.

The parser change does require a modicum of care though. Remember that the </p> tag is optional. Now suppose you decide that before your “main” content you want a paragraph of preamble. You could write:

<!DOCTYPE html>
<body>
  <p> This is my page preamble ...
  <main>
    My main content ...
    <div>
       A story ...
    </div>
  </main>
</body>

If and when browsers implement the <main> element, the <main> tag will automatically close the <p> element and in the DOM, the <p> element and the <main> element will be siblings of one another. The <div> element and its content will be a child of the <main> element. i.e. The DOM will be:

HTML
 +--HEAD
 +--BODY
     +--P
     |  +--This is my page preamble ... 
     +--MAIN
         +--My main content ...
         +--DIV
             +--A story 

However, right now in browsers, the <main> becomes a child element of the <p> element, and while “My main content …” is a child of the <main> element, the <div> element is not. i.e. the DOM has this structure:

HTML
 +--HEAD
 +--BODY
     +--P
     |  +--This is my page preamble ...
     |  +--MAIN
     |      +--My main content ... 
     +--DIV
        +--A story 

Now, of course, this is easily avoided by explicitly using a </p> tag, on the preamble paragraph, but it is a trap for the unwary.

Questions:
Answers:

The HTML 5.1 main element is now implemented in Webkit. Validation support to follow shortly. Expect Firefox implementation soonish.

Questions:
Answers:

You can go ahead and use it, Chrome 26 and Firefox 21 already implemented it.

Just as with the introduction of many other new HTML5 elements, not all browsers recognise <main> or have preset styles for it. You’ll need to ensure it displays as a block level element in your CSS:

main {display:block;}

For the time being, you’ll also need to use JavaScript to create the element for older versions of IE:

<script>document.createElement('main');</script>

Of course, if you use the html5shiv, <main> is now baked in directly.