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:
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:
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
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>