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

Wed Feb 13 21:28:45 PST 2013

On Thu, 14 Feb 2013, Ian Yang wrote:
> 
> 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.

I'm not sure what you mean.

<main> is just there to help you if you need to style the main part of the 
doc, basically. It's separate from marking up a _section_ of the document, 
which is what you would do using <section> or <article>.

> 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

It's easier to discuss with concrete cases. I haven't seen any pages that 
actually have an explicit "main content" section title, that seems a bit 
weird. You don't typically have a section in a book that contains the 
chapters, separate from the section that contains the table of contents or 
the appendices.

> And the following markup and document outline are more appropriate. 
>
> <!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

That's fine too (modulo my comments below). You could also just not bother 
with the <main> element here, as in:

   <!DOCTYPE html>
   <title>lorem ipsum</title>
   <header>
       <h1>Branding</h1>
       <nav>
           <h1>Navigation</h1>
           lorem ipsum
       </nav>
   </header>
   <section>
       <h1>Welcome</h1>
       lorem ipsum
   </section>
   <section>
       <h1>Intro</h1>
       lorem ipsum
   </section>
   <aside>
       <h1>Complementary Content</h1>
       <article>
           <h1>Latest News</h1>
           lorem ipsum
       </article>
       <article>
           <h1>Recent Comments</h1>
           lorem ipsum
       </article>
   </aside>
   <footer>
       lorem ipsum
   </footer>

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

It's really an authoring choice.

> 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").

It mainly serves as a styling hook. (Accessibility tools can't rely on the 
page having a "main" element or an element with role=main, since most 
pages don't use it. HTML actually provides enough hooks already for UAs to 
help users navigate a page.)

On Thu, 14 Feb 2013, Ian Yang wrote:
> 
> One thing needs to be figured out is that should <aside
> role="complementary"> be contained within <main role="main">? Or rather, is
> <aside role="complementary"> a supporting content for the entire document
> or just for <main role="main">? If it is the latter, then <aside> is fine
> being within <main>.

The two elements are orthogonal. You can use one in the other or vice 
versa, or have them separate, or just one, or have neither.

> The spec doesn't look like it has clearly defined the relationship 
> between <main> and <aside>.

There is no relationship.

One indicates a section of a page that consists of content that is 
tangentially related to the content around the aside element, and which 
could be considered separate from that content, e.g. a sidebar. The other 
is just a container for the dominant contents of an element.

HTH,
-- 
Ian Hickson               U+1047E                )\._.,--....,'``.    fL
http://ln.hixie.ch/       U+263A                /,   _.. \   _\  ;`._ ,.
Things that are impossible just take longer.   `._.-(,_..'--(,_..'`-.;.'