Search code examples
htmlmarkupoutlineoutliner

Strange html5 document outline


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


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>