# Providing heading elements at the beginning of each section of content

ID: H69

Technology: html

Type: Technique

## When to Use

HTML

## Description

The objective of this technique is to use section headings to convey the structure of the content. Heading markup can be used:

- to indicate start of main content;
- to mark up section headings within the main content area;
- to demarcate different navigational sections like top or main navigation, left or secondary navigation and footer navigation;
- to mark up images of text that are used as headings;
- to allow users the ability to navigate a page by sections or skip repeated blocks of information.

Headings are designed to convey logical hierarchy. Skipping levels in the sequence of headings may create the impression that the structure of the document has not been properly thought through or that specific headings have been chosen for their visual rendering rather than their meaning. Authors are encouraged to nest headings hierarchically. When headings are nested hierarchically, the most important information is given the highest logical level, and subsections are given subsequent logical levels.(i.e., `h2` is a subsection of `h1`). Providing this type of structure will help users understand the overall organization of the content more easily.

Since headings indicate the start of important sections of content, it is possible for users with assistive technology to jump directly to the appropriate heading and begin reading the content. This significantly speeds interaction for users who would otherwise access the content slowly. Headings create chunks of information that can be found easily by people with disabilities, such as a blind person using a screen reader, or a person with a cognitive disability who uses assistive technology that delineates groups of information, or someone with a communication disability or illiteracy, who uses a screen reader to assist them in their reading.

All of our techniques assume that people needing special user agents (including assistive technology or special plug-ins) will get and be using that type of user agent (for example: a screen reader, or plug-in that allows keyboard navigation of properly marked up content, etc.).

## Examples

### Organizing the sections of a search page

This example marks up each section heading using `h2` elements.

    <h1>Search Technical Periodicals</h1>
     <h2>Search</h2>
     <form action="/search" role="search">
      <label for="searchInput">Enter search topic:</label>
      <input id="searchInput" type="text">
      <input type="submit" value="Search">
     </form>
     <section>
       <h2>Available Periodicals</h2>
       <ul>
         <li><a href="https://example.com/pcoder">Professional Coder</a></li>
         <li><a href="https://example.com/algo">Algorithms</a></li>
         <li><a href="https://example.com/jse">Journal of Software Engineering</a></li>
       </ul>
     </section>
     <section>
       <h2>Search Results</h2>
       ... search results are returned in this section ...
     </section>

### Headings show the overall organization of the content

In this example, heading markup is used to make the navigation and main content sections perceivable.

    <main>
      <h1>Why Monday Monkey Lives For The Weekend</h1>
      ... text, images, and other material making up the main content ...
    </main>
    <nav aria-labelledby="nav-heading">
      <h2 id="nav-heading">More About Monday Monkey, Ltd.</h2>
      <ul>
        <li><a href="/about">About us</a></li>
        <li><a href="/contact">Contact us</a></li>
        ...
      </ul>
    </nav>

### Headings show the organization of material within the main content

    <!doctype html>
    <html lang="en">
      <head>
        <meta charset="utf-8">
        <title>Cooking techniques</title>
      </head>
      <body>
        <main>
          <h1>Cooking techniques</h1>
          <p>... some text here ...</p>
          <h2>Cooking with oil</h2>
          <p>... text of the section ...</p>
          <h2>Cooking with butter</h2>
          <p>... text of the section ...</p>
        </main>
      </body>
    </html>

## Tests

### Procedure

1. Check that the content is divided into separate sections.
2. Check that each section on the page starts with a heading.

### Expected Results

- For Success Criterion 2.4.1 (Bypass Blocks) check #2 is true.
- For Success Criterion 2.4.10 (Section Headings) check #1 and #2 are true.

## Related Techniques

- H42
- H97: Grouping related links using the nav element
- F2

## Resources

- HTML - the `h1`, `h2`, `h3`, `h4`, `h5`, and `h6` elements.
- MDN `<h1>` - `<h6>`: The HTML Section Heading elements.
- Nomensa: How to structure headings for web accessibility.
- WebAIM: Semantic Structure: Regions, Headings, and Lists.