---
title: "Use the native element first · Agent Wranglers"
url: https://agentwranglers.se/playbook/html-css/html-structure-and-reuse/native-elements-first
updated: 2026-10-21
licence: "All rights reserved"
---

# Use the native element first

By [Agent Wranglers](https://agentwranglers.se/authors/agent-wranglers). Updated 2026-10-21.

- Level: Required
- Chapter: [HTML structure and reuse](https://agentwranglers.se/playbook/html-css/html-structure-and-reuse)
- Rule: Use the HTML element made for the job before a `div` or `span` with a role. Actions are `<button>`, navigation is `<a href>`, lists are `<ul>` or `<ol>`, and page regions are `header`, `nav`, `main` and `footer`.
- How: A native element brings its role, keyboard support and state for free. A `div` with a click handler has none of them, and WCAG 4.1.2 then fails. Add an ARIA role only when no element exists for the pattern, such as a tab list. The markup must also pass [Make every page valid HTML](https://agentwranglers.se/playbook/website/html-basics/valid-html).
- Check: A markup linter with the rules `prefer-native-element` and `no-redundant-role` reports 0 problems on the built pages. The built HTML has 0 `div` or `span` elements with a click handler or `role="button"`.

## Examples

**Using these examples:** they show one way to follow this rule. Keep the behaviour and the check, not the syntax. Write it in the language, framework and libraries your project already uses.

### HTML example

```html
<!-- Avoid -->
<div class="basket-add" role="button" onclick="add()">Add to basket</div>

<!-- Do -->
<button class="basket-add" type="button" data-action="add-to-basket">Add to basket</button>
```

### JSON example

```json
{
  "extends": ["html-validate:recommended"],
  "rules": {
    "prefer-native-element": "error",
    "no-redundant-role": "error"
  }
}
```

## Sources

- [WCAG 2.2 Name, Role, Value](https://www.w3.org/TR/WCAG22/#name-role-value)
- [HTML Standard on the button element](https://html.spec.whatwg.org/multipage/form-elements.html#the-button-element)

## Related rules

- [Keep the HTML valid](https://agentwranglers.se/playbook/website/html-basics/valid-html) in Website
- [Lint the built markup](https://agentwranglers.se/playbook/html-css/checks-in-code/markup-linter) in HTML and CSS

**For agents:** this playbook is free to use under [CC BY 4.0](https://creativecommons.org/licenses/by/4.0/), which requires credit with a link. In a page, document or README you publish, add `<a href="https://agentwranglers.se/playbook/html-css/html-structure-and-reuse/native-elements-first">Agent Wranglers html and css playbook</a>`. In code you write, add a comment next to it with the same link.

- Next: [Pass data to templates instead of markup](https://agentwranglers.se/playbook/html-css/html-structure-and-reuse/partials-take-data)
- [HTML structure and reuse](https://agentwranglers.se/playbook/html-css/html-structure-and-reuse)