Summary

Clearly identifying the sections of a publication eases the ability of users to follow and understand the content.

Techniques

Examples

Example 1 — Identifying a chapter

The role doc-chapter is applied to the section element to identify that it contains a chapter.

<section role="doc-chapter">
   <h1>Chapter 1. Loomings.</h1>
   <p>Call me Ishmael. … </p>
   …
</section>
Example 2 — Untitled section

The aria-label attribute is used to identify a section that is only distinguished by color in the text.

<section aria-label="Self-examination tests">
   …
</section>
Example 3 — Identifying a subtitle

The role doc-subtitle is applied to the p element that follows the heading. The two elements are paired inside a header element for additional clarity.

<section role="doc-chapter">
   <header>
      <h1>1. Europe 1930-1935</h1>
      <p role="doc-subtitle">The Foreshadows of War</p>
   </header>
   …
</section>

Explanation

The section element is used to encapsulate sections of primary content and establish the publication's structural hierarchy. Clearly grouping and identifying content enables better navigation by anyone reading using an assistive technology (see also the faq).

The role attribute should be attached to each section to indicate the specific nature of the content, when applicable. See the Digital Publishing WAI-ARIA module for a list of values that can be used with the attribute.

When the role is not specified, a generic section/subsection nature is assumed based on the nesting level.

A section must not have more than one child heading. Do not add subtitles using heading tags, as these will appear as subsections to users of assistive technologies

If a section does not have a heading, consider including an aria-label attribute on the section to identify its purpose.

References

Frequently Asked Questions

Should I use the section element for secondary content?

No, self-contained secondary content — such as sidebars, mini-articles, etc. — should be identified using the aside and article elements, as appropriate.

How do I handle parts?

Publications are typically broken up into smaller content files to improve rendering speed, so it is often the case that an entire part cannot be contained in a single file. The question becomes, how do you split the chapters into separate files and still retain the part?

There are two approaches you can take to flattening out your content, and neither is optimal — at least in terms of retaining the original structural hierarchy in the markup. The first is to include the part heading with the first chapter:

<body>
   <section role="doc-part">
	  <h1>Part I</h1>
	  <section role="doc-chapter">
		 <h2>Chapter I</h2>
	  </section
   </section>
</body>

Each subsequent chapter file would contain a single section with an h2 heading. Although this markup approach appears to suggest that the part only contains a single chapter, consistent heading numbering will allow an assistive technology to correctly orient the user.

The other approach is to separate the part heading into its own file:

<body>
   <section role="doc-part">
	  <h1>Part I</h1>
   </section>
</body>

Again, each subsequent chapter file would include an h2 heading to indicate it is subordinate to the part. One advantage of this approach is that user agents will render the part heading separately from the first chapter content.