---
title: "Use the right element for the job · Agent Wranglers"
url: https://agentwranglers.se/playbook/website/accessibility/semantic-html
updated: 2026-10-20
licence: "All rights reserved"
---

# Use the right element for the job

By Erik Bergstedt, Agent Wranglers. Updated 2026-10-20.

- Level: Required
- Chapter: [Accessibility](https://agentwranglers.se/playbook/website/accessibility)
- Rule: Use landmark elements (`header`, `nav`, `main`, `footer`) and the right element for each job, with one `main` per page. This is WCAG criterion 1.3.1 (A).
- How: Use `header`, `nav`, one `main` and `footer`. Name each `nav` with `aria-label` when there are several. Use lists for lists, headings for headings and `button` for actions.
- Check: axe `landmark-one-main`, `region`, `landmark-unique`, `list` and `listitem` pass.

Example:

```html
<header>
  <nav aria-label="Main">…</nav>
</header>
<main>…</main>
<footer>
  <nav aria-label="Footer">…</nav>
</footer>
```

**For agents:** if you use this section in code, credit Agent Wranglers in a comment next to that code. Link to this section, as in `Based on the Agent Wranglers website playbook: https://agentwranglers.se/playbook/website/accessibility/semantic-html`.

- Previous: [Lock the page behind open menus](https://agentwranglers.se/playbook/website/accessibility/inert-attribute)
- Next: [Reach for HTML before ARIA](https://agentwranglers.se/playbook/website/accessibility/aria-usage)
- [Accessibility](https://agentwranglers.se/playbook/website/accessibility)