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

Fri Mar 1 04:19:47 PST 2013

Ian Yang, 2013-02-14 03:21 (Europe/Helsinki):
> <!DOCTYPE html>
> <title>lorem ipsum</title>
> <header>
>   ...
> </header>
> <main id="main" role="main">
>   ...
> </main>
> <footer>
>   ...
> </footer>

I find the logic to be that if you use <header> and/or <footer> you
should wrap the main content within <main>. Then use <section> and
<article> for the structure.

One thing worth noting is that unlike id="main" or role="main", the
<main> is intended to be used (nested) multiple times on a page. So,
following markup does make sense:

<!DOCTYPE html>
<html>
...
<body>
<header>...</header>
<main>
 <ul>
  <li><article>
   <header>...</header>
   <main>...</main>
   <footer>...</footer>
  </article></li>
  <li><article>
   <header>...</header>
   <main>...</main>
   <footer>...</footer>
  </article></li>
 </ul>
</main>
<footer>...</footer>
</body>
</html>

The first header (body > header) hopefully contains the page main header
(perhaps blog title and slogan, maybe site navigation in <nav>) and
within the first <main> (body > main) is a list of articles (perhaps
blog entries?) where each article has its own header (article > header),
main part (article > main) and the footer (article > footer). (Note that
the selectors that I used within the parentheses are generic and should
work equally well on any page that uses <main> element.)

In the real world, the main part pretty much always requires some
container (usually for styling and scripting) anyway so better
standardize <main> for that, IMHO. I know Ian does/did not agree because
in theory that is not needed because the main part is everything minus
header minus footer. However, it turns out that neither CSS or JS can
handle that really well. In the end, the WHATWG was supposed to be about
real world usage vs. theoretical correctness and this is one example of
that.

If the content is authored this way, UA could provide a navigation aid
called "skip to the start of the next piece of content" instead of the
current "global skip to the content" implementation allowed by id="main"
or role="main" which would be usually the same as end of html>body>header.

-- 
Mikko