16

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).

5

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:

HTML5 Outliner: overlayed outline

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.

5

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/.

HTML5 Outliner tooltip UI

  • It seems that this tool is also available as bookmarklet, JavaScript, Opera extension, and an experimental Firebug extension: code.google.com/p/h5o -- The last releases seem to be from 2010, though; but then I don’t know if the outline algorithm was changed in this time. – unor Feb 8 '14 at 12:48
  • @braveterry would you add the info from unors comment to the answer so it gets better visible (not all users read comments) – Angelo Fuchs Feb 9 '14 at 17:16
  • I just tested it (Chromium extension and bookmarklet). It seems to work great for most cases, but it doesn’t follow the algorithm 100% correctly. Examples: (1) Elements with the hidden attribute should not contribute to the outline, but in h5o they do. (2) The dialog element is a sectioning root, but h5o doesn’t handle it like that. – unor Feb 10 '14 at 6:27
  • 2
    Just a name, a link, and a screenshot do not make a good answer. Please see this meta post concerning what is considered a high-quality answer on this site. – Izzy Feb 20 '14 at 17:22
  • 1
    Whilst this may theoretically answer the question, it would be preferable to include the essential parts of the answer here, and provide the link for reference. – danijelc Feb 20 '14 at 17:29
2

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.