[whatwg] Is <main> now an official HTML5 element?

Wed Feb 13 17:21:10 PST 2013

On Thu, Feb 14, 2013 at 1:06 AM, Ian Hickson <ian at hixie.ch> wrote:

> On Wed, 13 Feb 2013, Ian Yang wrote:
> >
> > I saw the SitePoint article "Introducing the New HTML5 <main>
> > Element<http://www.sitepoint.com/html5-main-element/>" yesterday. Does
> > that mean <main> element has been approved by all editors of the working
> > group?
>
> <main> is currently in the HTML standard. That doesn't mean much, though.
> What means something is that <main> is now implemented by two browsers in
> their development builds. Once they ship in final versions, that's the
> point at which we know that the feature is part of the platform.
>
>
> > However, in spec, it still says that <main> element is not a sectioning
> > element.
>
> Correct. Broadly speaking, sectioning elements are those with headings;
> <main> doesn't typically have a heading, it contains the content after the
> heading, distinguishing it from the content that is "merely" heading and
> navigation and so forth.
>
>
> > That means, in document outline, main content will form another
> > tree structure instead of appearing under the original website tree
> > structure.
>
> I'm not sure what you mean here. The main content doesn't appear in the
> outline; the outline only contains the headers, essentially.
>
>
> > Can we have somebody advise on this? Is there a special consideration to
> > not making <main> a sectioning element?
>
> There's already corresponding sectioning elements to indicate something
> that is "main" content -- <article> or <section>, depending on what
> exactly the content is.
>
>
> The spec goes into some detail about this, including with examples, here:
>
>    http://whatwg.org/html#the-main-part-of-the-content
>    http://whatwg.org/html#the-main-element
>    http://whatwg.org/html#usage-summary-0
>    http://whatwg.org/html#sample-outlines
>

Thanks Hickson for providing information, especially those example links.

In the past, I always regarded a sectioning main content area is an
indispensable part in a document. Today, information above tell me that the
main content area seem doesn't need to be a titled section.

So it seems that the following markup contains one unnecessary <section>
and one unnecessary <h1>, and they cause one unnecessary indent in document
outline.

<!DOCTYPE html>
<title>lorem ipsum</title>
<header>
    <h1>Branding</h1>
    <nav>
        <h1>Navigation</h1>
        lorem ipsum
    </nav>
</header>
<section id="main" role="main">
    <h1>Main Content</h1>
    <section>
        <h1>Welcome</h1>
        lorem ipsum
    </section>
    <section>
        <h1>Intro</h1>
        lorem ipsum
    </section>
    <aside id="comp" role="complementary">
        <h1>Complementary Content</h1>
        <article>
            <h1>Latest News</h1>
            lorem ipsum
        </article>
        <article>
            <h1>Recent Comments</h1>
            lorem ipsum
        </article>
    </aside>
</section>
<footer>
    lorem ipsum
</footer>

1. Branding
        1. Navigation
        2. Main Content
                1. Welcome
                2. Intro
                3. Complementary Content
                        1. Latest News
                        2. Recent Comments

And the following markup and document outline are more appropriate. Since
the <main> is not a sectioning element, now it only serves as an element
for keyboard navigation (id="main") and for assistive technology to quick
navigate to (role="main").

<!DOCTYPE html>
<title>lorem ipsum</title>
<header>
    <h1>Branding</h1>
    <nav>
        <h1>Navigation</h1>
        lorem ipsum
    </nav>
</header>
<main id="main" role="main">
    <section>
        <h1>Welcome</h1>
        lorem ipsum
    </section>
    <section>
        <h1>Intro</h1>
        lorem ipsum
    </section>
    <aside id="comp" role="complementary">
        <h1>Complementary Content</h1>
        <article>
            <h1>Latest News</h1>
            lorem ipsum
        </article>
        <article>
            <h1>Recent Comments</h1>
            lorem ipsum
        </article>
    </aside>
</main>
<footer>
    lorem ipsum
</footer>

1. Branding
        1. Navigation
        2. Welcome
        3. Intro
        4. Complementary Content
                1. Latest News
                2. Recent Comments

If any of my above understanding is flawed, please point it out for me.
Thank you all.

Sincerely,
Ian Yang