Strange html5 document outline

Question

Strange html5 document outline

213 Views Asked by Kuwiuwuw Kurwiow At 04 April 2025 at 10:05

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

Original Q&A

There are 3 best solutions below

Rob W On 03 July 2013 at 13:59

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.

MMKarami On 13 August 2017 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>

**unor** · Accepted Answer

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>

Strange html5 document outline

There are 3 best solutions below

Related Questions in HTML

Related Questions in MARKUP

Related Questions in OUTLINE

Related Questions in OUTLINER

Trending Questions

Popular # Hahtags

Popular Questions