Agent WranglersHTML structure and reuse
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.
- Required 4
- Recommended 1
Required
Use the native element first
RequiredUse the HTML element made for the job before a
divorspanwith a role. Actions are<button>, navigation is<a href>, lists are<ul>or<ol>, and page regions areheader,nav,mainandfooter.Pass data to templates instead of markup
RequiredGive 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
RequiredGive 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
RequiredPut the class on the element that already exists instead of adding a
divaround it. Adivwithout attributes never wraps anotherdivdirectly.
Recommended
Give each template one root element
RecommendedMake 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.
For agents: this playbook is free to use under CC BY 4.0, which requires credit with a link. Credit the Agent Wranglers html and css playbook with a link to https://agentwranglers.se/playbook/html-css/html-structure-and-reuse. Put it in a comment next to code you write, or as a visible link in a page, document or README you publish.