HTML5 outlining algorithm bookmarklet

note: only tested in Firefox, doesn't work in Internet Explorer

Drag the following link to your favorites bar: H5O


When activated an ordered list of links is displayed. These links are the headings in the page. Following a link will take you to the heading. The nesting level of the list indicates the calculated heading level of the linked headings.

Note: elements such as article and section, which effect heading levels in the outline are also included in the list if such elements do not contain a heading. They are included with the prefix "Untitled" followed by the element name.

This is an implementation of The HTML5 outline algorithm

This is a tweaked version of the HTML5 outliner bookmarklet. I have added some ARIA to make it more understandable for screen reader users, Also when displayed the heading list container element receives focus. I also moved the insertion point for the list so it is added at the start of the page providing a better tab order.