Strange html5 document outline

Question

I've read some articles on the html5 outline algorithm, but this one is confusing me.

If you paste the following markup into this tool: http://gsnedders.html5.org/outliner/

<body>
    <nav>
        <h1>Navigation</h1>
        <ul>
            <li>...</li>
        </ul>
    </nav>
    <h1>My fantastic site</h1>
    <h2>About me</h2>
    <p>I am a man who lives a fascinating life. Oh the stories I could tell you...</p>
    <h2>What I do for a living</h2>
    <p>I sell enterprise-managed ant farms.</p>
    <h1>Contact</h1>
    <p>Shout my name and I will come to you.</p>
</body>

you would get such outline:

My fantastic site
1. Navigation
2. About me
3. What I do for a living
Contact

This is fairly simple. Navigation is a sub-section of <body> thus appears below <body>'s <h1>, like all the h2-level headings.

But take a look at the following example:

<body>
    <nav>
        <h1>Navigation</h1>
        <ul>
            <li>...</li>
        </ul>
    </nav>
    <h1>My fantastic site</h1>
    <figure><img src="" alt="" /><figure>
    <h2>About me</h2>
    <p>I am a man who lives a fascinating life. Oh the stories I could tell you...</p>
    <h2>What I do for a living</h2>
    <p>I sell enterprise-managed ant farms.</p>
    <h1>Contact</h1>
    <p>Shout my name and I will come to you.</p>
</body>

I've added <figure> element between <h1> and <h2> and this seems to affect outline according to http://gsnedders.html5.org/outliner/.

Output from outliner:

My fantastic site
1. Navigation
  1. About me
  2. What I do for a living
Contact

All h2-level headings are now descendants of <nav> instead of <body>. Can anyone explain why does it happen? Is that some kind of a bug in the outliner tool?

Thanks

score 0 · Answer 1 · answered Jul 03 '13 at 13:59

0

It's clearly a bug with that site. Also, your closing figure tag is incorrect and there should only be one h1 per page.

Try testing this on JSFiddle.net and you'll see it works as expected. Also, W3C Validator is a good place to check your HTML5.

answered Jul 03 '13 at 13:59

Rob W

9,134
1
30
50

Yea, seems like it's a bug. Closing `
` doesn't help.
– Kuwiuwuw Kurwiow Jul 05 '13 at 17:40
For SEO-related purposed, H1 tags should be used once per page. Sorry for the lack of clarification. – Rob W Dec 02 '13 at 16:45

score 0 · Accepted Answer · answered Jul 06 '13 at 17:55

This looks like a bug to me.

It seems to occur as soon as you use a sectioning root element (blockquote, details, dialog, fieldset, figure) directly after the body’s h1.

If I place the sectioning root element before the h1, the outliner throws an error (<type 'exceptions.AttributeError'>). I used this document:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
</head>
<body>

    <nav></nav>

    <blockquote></blockquote>

    <h1>My fantastic site</h1>

    <h2>About me</h2>

</body>
</html>

score 0 · Answer 3 · answered Aug 13 '17 at 15:34

The main problem is that your closing figure tag is forgotten with you. Because of this subtitle problem the mentioned site to generate outline, consider all the next elements after figure element as subset of figure element. It means figure element becomes their conteiner. Now, due to this deduction by that site all of the contents of your document after figure element condider as a content of a Sectioning Root element (blockquote, body, details, dialog, fieldset, figure). As I am sure you know the sections and headings inside these elements do not contribute to the outlines of their ancestors. Headings in a Sectioning Root element will not be included in the main document outline. That means you can have a complex heading hierarchy within a blockquote without worrying how it will affect the overall structure of the document.

To make sure about this answer, please test following html snippet, you will see the same result:

<body>
    <nav>
        <h1>Navigation</h1>
        <ul>
            <li>...</li>
        </ul>
    </nav>
    <h1>My fantastic site</h1>
    <figure>
        <img src="" alt="" />
        <h2>About me</h2>
        <p>I am a man who lives a fascinating life. Oh the stories I could tell you...</p>
        <h2>What I do for a living</h2>
        <p>I sell enterprise-managed ant farms.</p>
        <h1>Contact</h1>
        <p>Shout my name and I will come to you.</p>
    </figure>
</body>

but I think this is what you whanted:

<body>
    <nav>
        <h1>Navigation</h1>
        <ul>
            <li>...</li>
        </ul>
    </nav>
    <h1>My fantastic site</h1>
    <figure>
        <img src="" alt="" />
    </figure>
    <h2>About me</h2>
    <p>I am a man who lives a fascinating life. Oh the stories I could tell you...</p>
    <h2>What I do for a living</h2>
    <p>I sell enterprise-managed ant farms.</p>
    <h1>Contact</h1>
    <p>Shout my name and I will come to you.</p>    
</body>

Strange html5 document outline

3 Answers3