RhymeGuy
RhymeGuy

Reputation: 2112

HTML5 - Need explanation about outline

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

Answers (3)

public override
public override

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

outcoldman
outcoldman

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

singhiskng
singhiskng

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

Related Questions