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: 270
        
html5
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