# Using h1-h6 to identify headings

ID: H42

Technology: html

Type: Technique

## When to Use

HTML

## Description

The objective of this technique is to use HTML heading markup to provide semantic code for headings in the content. Heading markup will allow assistive technologies to present the heading status of text to a user. A screen reader can recognize the code and announce the text as a heading with its level, beep or provide some other auditory indicator. Screen readers are also able to navigate heading markup which can be an effective way for screen reader users to more quickly find the content of interest. Assistive technologies that alter the authored visual display will also be able to provide an appropriate alternate visual display for headings that can be identified by heading markup.

## Examples

### Hierarchical Heading Organization

In the following example, headings are used in a hierarchical layout with `h3` as a subsection of `h2`, which is a subsection of `h1`.

    <h1>Plant Foods that Humans Eat</h1>
    <p>There are an abundant number of plants that humans eat ...</p>
    <h2>Fruit</h2>
    <p>A fruit is a structure of a plant that contains its seeds ...</p>
    <h3>Apple</h3>
    <p>The apple is the pomaceous fruit of the apple tree ...</p>
    <h3>Orange</h3>
    <p>The orange is a hybrid of ancient cultivated origin ...</p>
    <h3>Banana</h3>
    <p>Banana is the common name for herbaceous plants ...</p>
    <h2>Vegetables</h2>
    <p>A vegetable is an edible plant or part of a plant other than a sweet fruit ...</p>
    <h3>Broccoli</h3>
    <p>Broccoli is a plant of the mustard/cabbage family ...</p>
    <h3>Brussels sprouts</h3>
    <p>The Brussels sprout of the Brassicaceae family, is a Cultivar group
       of wild cabbage ...</p>
    <h3>Green beans</h3>
    <p>Green beans have been bred for the fleshiness, flavor, or
       sweetness of their pods ...</p>

### Headings in a three-column layout

In this example, the main content of the page is in the middle column of a three-column page. The title of the main content matches the title of the page, and is marked as `h1`, even though it is not the first thing on the page. The content in the first and third columns is less important, and marked with `h2`.

It is important to note that the example code below is not intended to prescribe what level of heading should be used for a particular section of the web page. In the example, the layout could be presented with the first heading in each column at the same logical level (such as an `h1`), or as found in the example, where the logical level reflects its importance in relation to the main content.

    <!doctype html>
    <html lang="en">
    <head>
      <title>Stock Market Up Today</title>
    </head>
    <body>
      <!-- left nav -->
      <nav class="left-nav">
        <h2>Site Navigation</h2>
        <!-- content here -->
      </nav>

      <!-- main contents -->
      <main class="main">
        <h1>Stock Market up today</h1>
        <!-- content here -->
      </main>

      <!-- right panel -->
      <aside class="side-bar">
        <h2>Related links</h2>
        <!-- content here -->
      </aside>
    </body>
    </html>

## Tests

### Procedure

1. Check that heading markup is used when content is a heading and the heading markup indicates the appropriate heading level for the content.
2. Check that heading markup is not used when content is not a heading.

### Expected Results

- Checks #1 and #2 are true.

## Related Techniques

- H69
- G141
- F2
- F43

## 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.