---
title: "Lint the built markup · Agent Wranglers"
url: https://agentwranglers.se/playbook/html-css/checks-in-code/markup-linter
updated: 2026-10-21
licence: "CC BY 4.0"
licence_url: https://creativecommons.org/licenses/by/4.0/
---

# Lint the built markup

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

For AI agents: [llms.txt](https://agentwranglers.se/llms.txt) is a short guide that sends you to the rules your problem needs, and [rules.json](https://agentwranglers.se/playbook/html-css/rules.json) holds every rule of this playbook as JSON.

- Level: Recommended
- Chapter: [Checks in code](https://agentwranglers.se/playbook/html-css/checks-in-code)
- Rule: Run a markup linter such as html-validate over every built page, with rules for structure on top of validity. Turn on rules against inline styles, duplicate ids, redundant roles and ARIA patterns that have a native element.
- How: A validator only proves the HTML parses. A linter with its own config enforces the rules of this playbook in markup, such as [Use the native element first](https://agentwranglers.se/playbook/html-css/html-structure-and-reuse/native-elements-first). Run it on the build output, because templates only show their final markup once data is filled in. Validity itself is covered by [Make every page valid HTML](https://agentwranglers.se/playbook/website/html-basics/valid-html).
- Check: The markup linter reports 0 errors on every built page. Adding `<div style="margin:0">` or a second `id="menu"` to a page stops the build.

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

### JSON example

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

### HTML example

```html
<!-- Each element below fails the lint -->
<div style="margin:0">Opening hours</div>
<nav role="navigation" id="menu"></nav>
<ul id="menu"></ul>
```

## Related rules

- [Use the native element first](https://agentwranglers.se/playbook/html-css/html-structure-and-reuse/native-elements-first) in HTML and CSS
- [Keep the HTML valid](https://agentwranglers.se/playbook/website/html-basics/valid-html) in Website

**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/checks-in-code/markup-linter">Agent Wranglers HTML and CSS playbook</a>`. In code you write, add a comment next to it with the same link.

- Previous: [Remove selectors that match nothing](https://agentwranglers.se/playbook/html-css/checks-in-code/unused-selectors)
- Next: [Check the built CSS as well as the source](https://agentwranglers.se/playbook/html-css/checks-in-code/check-built-css)
- [Checks in code](https://agentwranglers.se/playbook/html-css/checks-in-code)