Tool that displays outline of HTML5 documents

Question

The HTML5 specification defines an algorithm for creating a document outline.

I’m looking for tools that follow this algorithm exactly and display the outline. Being able to export the outline as text would be nice, but it’s not required.

The tool should support at least one of these ways to input an HTML5 document:

• via HTTP URL (fetching it from the Web)
• via direct input (pasting the whole HTML document)

It doesn’t matter what kind of tool (stand-alone or integrated into browsers, text editors, …; for desktop, mobile or server; GUI or text-based), but please no web services (which can’t be installed on my own server).

Answer 1

HTML5 Outliner is available as bookmarklet and JavaScript file. (There is also an online demo available.)

When you click at the bookmarklet, the outline gets overlayed on the page (fixed positioned). Clicking anywhere on the page (or again at the bookmarklet) hides the outline.

License

It is licensed under the WTFPL (Version 2), so it’s Free Software (but not Open Source Software).

Example

Here’s an example used on the Wikipedia article Stack Exchange:

Features

Clicking on an entry scrolls the page to the corresponding heading/section.

You can change the numbering from single-level (default, see screenshot) to multi-level (1, 1.7, 1.7.1, …). It can also be disabled.

You can disable the functionality that clicking anywhere on the page hides the outline (so you’d have to click the bookmarklet again to hide it).

You can enable tooltips, containing technical details (e.g., which sectioning element and/or heading element is used).

The entry colors (as well as other CSS) can be changed easily.

Answer 2

Take a look at the Google Chrome Extension HTML5 Outliner. This tool is also available as a bookmarklet, JavaScript, Opera extension, and an experimental Firebug extension: https://code.google.com/p/h5o/.

Answer 3

The current backend code of the W3C HTML Checker has a Show outline feature that conforms to the outline algorithm in the HTML spec.

I’ve written instructions on how you can easily run your own instance of the checker locally.

You can have it downloaded and run within minutes (if not seconds) with just two commands:

wget https://sideshowbarker.net/releases/jar/vnu.jar
java -cp ./vnu.jar nu.validator.servlet.Main 8888

Then open http://localhost:8888/ in your browser and you’ll have a form you can use for either checking documents by specifying their URLs or by file upload.

To get an outline for a document, just check the outline checkbox in that form.