Module 9: Semantic HTML and Page Layouts
Heading Hierarchy and Page Outline
Write headings that describe the actual content hierarchy and avoid relying on an automatic outline algorithm.
Headings are navigation points as well as visual labels. A clear hierarchy helps visitors scan a page and allows assistive technology users to move between sections.
A typical article might use one h1 for the article title, h2 elements for major sections, and h3 elements for subsections within those sections.
<article>
<h1>Preparing images for the web</h1>
<section>
<h2>Choose an image format</h2>
<h3>Photographs</h3>
<h3>Icons and illustrations</h3>
</section>
<section>
<h2>Set intrinsic dimensions</h2>
</section>
</article>
Do not skip heading levels to achieve a smaller visual size. Use CSS classes to change the size and spacing while keeping the correct heading level.
Do not rely on an automatic outline algorithm to repair heading choices. The section element does not reset heading levels or create a separate hidden outline that fixes poorly chosen headings. Authors are responsible for choosing a meaningful hierarchy.
A useful review technique is to extract the headings from the page. They should read like a useful table of contents.