HTML5 - Need explanation about outline
- by RhymeGuy
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?