Reputation: 2112
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?
Upvotes: 2
Views: 191
Reputation: 982
Create explicit section structure; dont't forget that <main>
is not sectioning node. In your code sample 'Header' <h1>
is root node ( level#1 ) and is assigned two 'Article' child nodes ( level#2 ) implicitly. 'Main content' <h1>
is at the same level ( level#1 ) as main 'Header' and holds the rest of implicit section nodes; 'article-s' and last 'section' which are at the same level ( level#2 ). This is how the outliner sees your structure ( bare-boned-old-style-implicit ):
<doctype html>
<h1>main-level</h1>
<h2>descendant</h2>
<h2>descendant</h2>
<h1>main-level</h1>
<h2>descendant</h2>
<h2>descendant</h2>
<h2>descendant</h2>
<h2>descendant</h2>
<h2>descendant</h2>
To avoid confusion it's recomended to excplicitly define desired section structure:
<doctype html>
<header>
<h1>root</h1>
<section>
<h1>Header</h1>
<article><h2>Article</h2></article>
<article><h2>Article</h2></article>
</section>
</header>
<main>
<section>
<h1>Main content</h1>
<article><h2>Article</h2></article>
<article><h2>Article</h2></article>
<article><h2>Article</h2></article>
<article><h2>Article</h2></article>
</section>
</main>
<section>
<h1>Sidebar</h1>
</section>
This way 'Header', 'Main content', 'Sidebar' are at the same level ( level#2 ); and are children of main 'root' node ( level#1 ). Would <header>
and <main>
be sectioning nodes you'd get the outline you've mentioned, and the structure would translate to this one:
<doctype html>
<section>
<h1>Header</h1>
<article><h2>Article</h2></article>
<article><h2>Article</h2></article>
</section>
<section>
<h1>Main content</h1>
<article><h2>Article</h2></article>
<article><h2>Article</h2></article>
<article><h2>Article</h2></article>
<article><h2>Article</h2></article>
</section>
<section>
<h1>Sidebar</h1>
</section>
But they're not, and I suggest you designate sections explicitly.
Btw, notice that when used explicitly sections ( not headings ) take the role of defining document structure ( outline, that is ) instead of, old style, <h1>
-<h6>
, here's example:
<doctype html>
<h6>Grand-Grand</h6>
<!-- notice top level h6 -->
<section>
<h6>Grand</h6>
<article><h1>Minor</h1></article>
<!-- and h1 at the bottom of outline tree -->
<article><h1>Minor</h1></article>
</section>
<section>
<h6>Grand</h6>
<article><h1>Minor</h1></article>
<article><h3>Minor</h3></article>
<article><h4>Minor</h4></article>
<article><h2>Minor</h2></article>
</section>
<section>
<h5>Grand</h5>
</section>
Notice how first heading in a section just names containing section ( made by section elements), and structure is dictated by explicit section definition ( meaning you can use <h1>
s, or any other headings, all over the place, in arbitrary order, without impact in outline structure ). The same as:
<doctype html>
<h1>Grand-Grand</h1>
<section>
<h1>Grand</h1>
<article><h2>Minor</h2></article>
<article><h2>Minor</h2></article>
</section>
<section>
<h1>Grand</h1>
<article><h2>Minor</h2></article>
<article><h2>Minor</h2></article>
<article><h2>Minor</h2></article>
<article><h2>Minor</h2></article>
</section>
<section>
<h1>Grand</h1>
</section>
, as far as html5 outline is consirned. I guess that it was implemented specifically for htm parsers, ( there is practically no new 'visual impact' ), so that they can more precisely 'recognize' what's what on page and to offer smoother experience and help people with disabilities. Chrome has nice html5 outliner extension; it places icon in right portion of address bar and display pade's outline when clicked.
Upvotes: 1
Reputation: 11832
main
element is not a sectioning content. Please take a look on HTML 5.1 draft 4.5.14 The main element. Also you can read more information about outlining algorithm on Mozilla developer network The HTML5 Outline Algorithm.
As I understand you cannot really do what you want to do, because in your example your body element (the main element) has more than one h1.
Upvotes: 1
Reputation: 511
i don't know why it is not working on your computer,but just modifiy your section
tag to body
tag
and its working
Upvotes: 1