Sections and Headings

As I touched on in the introduction to this section, always group related content that is structurally significant in section elements to facilitate navigation, and always indicate why you’ve created the grouping using the epub:type attribute:

<section epub:type="epilogue">
    …
</section>

The entries in the table of contents in your navigation document are all going to be structurally significant, which can be a helpful guide when it comes to thinking about how to properly apply the section element. Some additional ideas on structural significance can be gleaned from the terms in the EPUB 3 Structural Semantics Vocabulary. For example, a non-exhaustive list of semantics for sectioning content includes:

• foreword

• prologue

• preface

• part

• chapter

• epilogue

• bibliography

• glossary

• index

Semantics are especially helpful when a section does not have a heading. Sighted readers are used to the visual conventions that distinguish dedications, epigraphs, and other front matter that may be only of slight interest, for example, and can skip past them. Someone who can’t see your content has to listen to it if you don’t provide any additional information to assist them.

Headingless, unidentified content also means the person will have to listen to it long enough to figure out why it’s even there. Have you just added an epigraph to the start of your book, and skipping the containing section will take them to the first chapter, or are they listening to an epigraph that starts the first chapter and skipping the section will take them to chapter two? These are the impediments you shift onto your reader when you don’t take care of your data.

When the section does contain a heading, there are two options for tagging: numbered headings that reflect the current level or h1 headings for every section. At this point in time, using numbered headings is recommended, as support for navigation via the structure of the document is still developing:

<section epub:type="part">
    <h1>Part I</h1>

    <section epub:type="chapter">
        <h2>Chapter 1</h2>
        …
    </section>
</section>

Numbered headings will also work better for forward-compatibility with older EPUB reading systems.

Using an h1 heading regardless of the nesting level of the section will undoubtedly gain traction moving forward, though. In this case, the h1 becomes more of a generic heading, as traversal of the document will occur via the document outline and not by heading tags (the construction of this outline is defined in HTML5). There is only limited support for this method of navigation at this time, however.

And remember that titles are an integral unit of information. If you want to break a title across multiple lines, change font sizes, or do other stylistic trickery, use spans and CSS and keep the display in the style layer. Never add multiple heading elements for each segment. Use span elements if you need to visually change the look and appearance of headings.

To break a heading across lines, we could use this markup:

<h1>Chapter <span class="chapNum">One</span> Loomings.</h1>

and then add the following CSS class to change the font size of the span and treat it as a block element (i.e., place the text on a separate line):

span.chapNum {
    display: block;
    margin: 0.5em 0em;
    font-size: 80%
}

If you fragment your data, you fragment the reading experience and cause confusion for someone trying to piece back together what heading(s) they’ve actually run into.