When can I safely use the new

element in HTML5?

On the 16th December, a HTML5 extension specification for the

element was submitted to the W3C under something called an editors draft. The abstract is

相关标签:

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.

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.

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.