Menu
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?
978
Definition and UsageThe <main> tag specifies the main content of a document. The content inside the <main> element should be unique to the document. It should not contain any content that is repeated across documents such as sidebars, navigation links, copyright information, site logos, and search forms.
The <main> element can only be used once in each HTML file. It is followed by a closing tag, </main> , which should be placed at the end of the content. Both tags must be used outside other structural elements such as <head> and its closing tag, and <footer> and its closing tag.
Support for <main> will be much like support for any other new container element introduced in HTML 5.
display: block and give you the visual effects of itThe "when" depends on what level of browser support you need and how willing you are to depend on a JS shim.
66
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.
27
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
