---
title: "HTML structure and reuse · Agent Wranglers"
url: https://agentwranglers.se/playbook/html-css/html-structure-and-reuse
updated: 2026-10-21
licence: "All rights reserved"
---

# HTML structure and reuse

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

> Build pages from native elements and small templates that take data. Every repeated pattern comes from one place, with stable ids and no extra wrappers.

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

## Required

- [Use the native element first](https://agentwranglers.se/playbook/html-css/html-structure-and-reuse/native-elements-first): 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`.
- [Pass data to templates instead of markup](https://agentwranglers.se/playbook/html-css/html-structure-and-reuse/partials-take-data): Give every template or component function plain data, such as text, numbers, lists and named options. Callers never pass HTML strings or extra class names into it.
- [Keep ids unique and stable](https://agentwranglers.se/playbook/html-css/html-structure-and-reuse/unique-stable-ids): Give each id on a page a value that appears once on that page and stays the same in every build. Make it from the content or the data key, never from a counter or a random number.
- [Avoid wrapper elements that only hold a class](https://agentwranglers.se/playbook/html-css/html-structure-and-reuse/no-wrapper-divs): Put the class on the element that already exists instead of adding a `div` around it. A `div` without attributes never wraps another `div` directly.

## Recommended

- [Give each template one root element](https://agentwranglers.se/playbook/html-css/html-structure-and-reuse/one-root-per-template): Make every template return exactly one root element that carries the module's root class. Callers never wrap it in an extra element to change how it looks.
- [Clone markup that scripts add from a template element](https://agentwranglers.se/playbook/html-css/html-structure-and-reuse/template-element): Keep every piece of markup that a script inserts in a `<template>` element in the page. Scripts clone it and fill in text, and never build HTML in strings.
- [Name custom elements with the project prefix](https://agentwranglers.se/playbook/html-css/html-structure-and-reuse/custom-element-names): Give every custom element a name that starts with one project prefix and a hyphen, such as `bakery-basket`. Define each name in exactly one file.

- Previous: [Naming and state](https://agentwranglers.se/playbook/html-css/naming-and-state)
- Next: [Checks in code](https://agentwranglers.se/playbook/html-css/checks-in-code)
- [All chapters](https://agentwranglers.se/playbook/html-css)