HTML5 - Need explanation about outline

Posted by RhymeGuy on Stack Overflow See other posts from Stack Overflow or by RhymeGuy
Published on 2013-10-19T07:22:10Z Indexed on 2013/10/19 9:54 UTC
Read the original article Hit count: 219

Filed under:

So, lets say that I have the following structure:

<doctype html>
<header>
    <h1>Header</h1>
    <article><h2>Article</h2></article>
    <article><h2>Article</h2></article>
</header>

<main>
    <h1>Main content</h1>
    <article><h2>Article</h2></article>
    <article><h2>Article</h2></article>
    <article><h2>Article</h2></article>
    <article><h2>Article</h2></article>
</main>

<section>
    <h1>Sidebar</h1>
</section>

If i check outline using http://gsnedders.html5.org/outliner/ (or any other), I'll get outline like this:

1. Main content
    1. Header
       1. Article
       2. Article
    2. Article
    3. Article
    4. Article
    5. Article
    6. Sidebar

Which (from my understanding) is not correct. I have thought that it should look like this:

1. Header
       1. Article
       2. Article
2. Main content
       1. Article
       2. Article
       3. Article
       4. Article
3. Sidebar

Why this happens? I can get desired outline if I use section element. But id there is main element in HTML structure, then everything breaks (at least for me - it's not how I understood it).

Can I achieve desired outline using main element?

© Stack Overflow or respective owner

Related posts about html5