Strange html5 document outline

StackOverflow https://stackoverflow.com/questions/17449925

  •  02-06-2022
  •  | 
  •  

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:

  1. My fantastic site
    1. Navigation
    2. About me
    3. What I do for a living
  2. 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:

  1. My fantastic site
    1. Navigation
      1. About me
      2. What I do for a living
  2. 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

Was it helpful?

Solution

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>

OTHER TIPS

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.

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>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top