# Organizing a page using headings

ID: G141

Technology: general

Type: Technique

## When to Use

Pages with content organized into sections.

## Description

The objective of this technique is to ensure that sections have headings that identify them. Success Criterion 1.3.1 requires that the headings be marked such that they can be programmatically identified.

In HTML, this could be done using the HTML heading elements (`h1`, `h2`, `h3`, `h4`, `h5`, and `h6`). These allow user agents to automatically identify section headings. Other technologies use other techniques for identifying headers. To facilitate navigation and understanding of overall document structure, authors should use headings that are properly nested (e.g., `h1` followed by `h2`, `h2` followed by `h2` or `h3`, `h3` followed by `h3` or `h4`, etc.).

## Examples

### Headings used to organize an HTML page

A page on cooking techniques uses a h1 element for the overall title, and h2 elements for major sections on cooking with oil vs cooking with butter, and h3 elements for sub-sections on oil-cooking techniques.

    <!doctype html>
    <html lang="en">
      <head>
        <title>Cooking techniques</title>
      </head>
      <body>
        <h1>Cooking techniques</h1>
        ... some text here ...
        <h2>Cooking with oil</h2>
        ... text of the section ...
        <h3>Sautéeing</h3>
        ...
        <h3>Deep frying</h3>
        <h2>Cooking with butter</h2>
        ... text of the section ...
      </body>
    </html>

## Tests

### Procedure

1. Examine a page with content organized into sections.
2. Check that a heading for each section exists.

### Expected Results

- Check #2 is true.

## Related Techniques

- ARIA12
- H42
- H69

## Resources

- WebAIM: Semantic Structure
- HTML - The `h1`, `h2`, `h3`, `h4`, `h5`, and `h6` elements