# Grouping related links using the `nav` element

ID: H97

Technology: html

Type: Technique

## When to Use

HTML documents that contain related links.

## Description

The objective of this technique is to group navigation links using the HTML `nav` element. The `nav` element is one of several sectioning elements in HTML. Use of this markup can make groups of links easier to locate and skip past by users of assistive technology such as screen readers. Using semantic structures allow custom style sheets to be used to change the presentation of groups of links while preserving their relationship. When the `nav` element is employed more than once on a page, distinguish the navigation groups by using an `aria-labelledby` or `aria-label` attribute.

Not all groups of links need to use the `nav` element for markup. For instance, links may be grouped in other structure such as lists or may use ARIA markup if they do not represent a discrete section of the page.

## Examples

### Navigation links enclosed in a nav element

This example uses a `nav` element to group navigation links in an accessibility curriculum.

    <nav>
      <ul>
        <li><a href="/web-accessibility.html">Web Accessibility</a></li>
        <li><a href="/doc-accessibility.html">Document Accessibility</a></li>
        <li><a href="/mobile-accessibility.html">Mobile Accessibility</a></li>
      </ul>
    </nav>

### Multiple `nav` elements and `aria-labelledby`

The following example shows a best practice of how landmarks might be added to an HTML document in situations where there are two or more of the same type of landmark on the same page. For instance, if a `nav` element is used multiple times on a page, each instance may have a unique label specified using `aria-labelledby`:

    <nav aria-labelledby="site-nav-heading">
      <h2 id="site-nav-heading">Site</h2>
        <ul>
          <li><a href="...">nav link 1</a></li>
          <li><a href="...">nav link 2</a></li>
          <li><a href="...">nav link 3</a></li>
        </ul>
    </nav>
    <nav aria-labelledby="related-nav-heading">
      <h2 id="related-nav-heading">Related Topics</h2>
        <ul>
        <li><a href="...">topic link 1</a></li>
        <li><a href="...">topic link 2</a></li>
        <li><a href="...">topic link 3</a></li>
      </ul>
    </nav>

### Multiple `nav` elements and `aria-label`

The following example shows a best practice of how landmarks might be added to an HTML document in situations where there are two or more of the same type of landmark on the same page, and there is no existing text on the page that can be referenced as the label:

    <nav aria-label="Site">
      <ul>
        <li>< href="...">nav link 1</a></li>
        <li>< href="...">nav link 2</a></li>
        <li>< href="...">nav link 3</a></li>
      </ul>
    </nav>
    <nav aria-label="Tags">
      <ul>
        <li><a href="...">tag link 1</a></li>
        <li><a href="...">tag link 2</a></li>
        <li><a href="...">tag link 3</a></li>
      </ul>
    </nav>

## Tests

### Procedure

1. Check that links that are visually grouped and represent a section of the page are enclosed in a `nav` element.

### Expected Results

- Check #1 is true.

## Related Techniques

- ARIA11
- G141
- G140
- H42

## Resources

- HTML - `nav` element.