Each list item either contains a single link to a location in the content (as shown in the example above), a link followed by an ordered list of subheadings, or a span element (a heading) followed by an ordered list of subheadings. That’s really all there is to building navigation lists.

Let’s take a look at a piece of a more complex table of contents now that we know what we’re looking at:

<nav epub:type="toc">
    <h1>The Contents</h1>
    <ol>
        <li>
            <span>SECTION IV FAIRY STORIES—MODERN FANTASTIC TALES</span>
            <ol>
                <li>
                    <span>Abram S. Isaacs</span>
                    <ol>
                        <li>
                            <a href="section004.xhtml#s190">
                                190. A Four-Leaved Clover
                            </a>
                            <ol>
                                <li>
                                    <a href="section004.xhtml#s190-1">
                                        I. The Rabbi and the Diadem
                                    </a>
                                </li>
                                <li>
                                    <a href="section004.xhtml#s190-2">
                                        II. Friendship
                                    </a>
                                </li>
                            </ol>
                        </li>
                    </ol>
                </li>
            </ol>
        </li>
    </ol>
</nav>

Here we start with two heading levels, one for the section and another for the author (as indicated by the span tags that surround the text). We then have the title of the tale (“A Four-Leaved Clover”), which has additionally been broken down into parts, for a grand total of four levels of navigable content.

But it’s hard enough to format all these lists for the example, let alone display them in a reading device without line wrapping getting in the way. This is the point where aesthetics would win out in the old NCX and the last level would typically be dropped, since it carries the least structurally-important information. But you’d have also just sacrificed completeness for visual clarity, an accessibility no-no. It might not seem like a big issue here, but consider the many levels of depth typical textbooks contain (numbered and unnumbered) and how difficult it makes navigating when the structure outline is gone.

The HTML5 hidden attribute arrives at this point to save the day. This attribute is the promised solution to indicating where visual display should end without the requirement to remove entries. Since we’ve decided we only want to visually render down to the level of the tales the author wrote, we can attach the attribute to the ordered list containing the part links. Removing a couple of levels for clarity, our previous example would now be tagged as follows:

<li>
    <a href="section004.xhtml#s190">190. A Four-Leaved Clover</a>
    <ol hidden="hidden">
        <li>
            <a href="section004.xhtml#s190-1">I. The Rabbi and the Diadem</a>
        </li>
        <li>
            <a href="section004.xhtml#s190-2">II. Friendship</a>
        </li>
    </ol>
</li>

Now all a sighted reader will be presented is the linkable name of the tale (the child ordered lists will be invisible to them), but someone using an assistive technology will still be able to descend to the part level to move around.