---
title: "Avoid wrapper elements that only hold a · Agent Wranglers"
url: https://agentwranglers.se/playbook/html-css/html-structure-and-reuse/no-wrapper-divs
updated: 2026-10-21
licence: "CC BY 4.0"
licence_url: https://creativecommons.org/licenses/by/4.0/
---

# Avoid wrapper elements that only hold a class

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: [HTML structure and reuse](https://agentwranglers.se/playbook/html-css/html-structure-and-reuse)
- Rule: 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.
- How: Each extra wrapper deepens the tree, makes selectors longer and hides structure from assistive technology. Style the parent, the child or the list item directly. Use an attribute such as `data-size` on the existing element for a variant. When a wrapper is needed for a container query, it carries the module class and earns its place. The selector depth limit is in [Never style by position or deep nesting](https://agentwranglers.se/playbook/html-css/naming-and-state/no-position-selectors).
- Check: A build check over every page finds 0 `div` elements without attributes whose first child is a `div`.

## 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><div><ul class="menu-list"><li>Rye loaf</li></ul></div></div>

<!-- Do -->
<ul class="menu-list"><li>Rye loaf</li></ul>
```

### JavaScript example

```js
const emptyWrappers = html.match(/<div>\s*<div[\s>]/g) || [];
if (emptyWrappers.length) throw new Error(`${path}: ${emptyWrappers.length} bare div wrappers`);
```

### Python example

```python
import re
empty_wrappers = re.findall(r"<div>\s*<div[\s>]", html)
if empty_wrappers:
    raise SystemExit(f"{path}: {len(empty_wrappers)} bare div wrappers")
```

## Sources

- [HTML Standard on the div element](https://html.spec.whatwg.org/multipage/grouping-content.html#the-div-element)

## Related rules

- [Never style by position or deep nesting](https://agentwranglers.se/playbook/html-css/naming-and-state/no-position-selectors) 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/no-wrapper-divs">Agent Wranglers HTML and CSS playbook</a>`. In code you write, add a comment next to it with the same link.

- Previous: [Keep ids unique and stable](https://agentwranglers.se/playbook/html-css/html-structure-and-reuse/unique-stable-ids)
- Next: [Clone markup that scripts add from a template element](https://agentwranglers.se/playbook/html-css/html-structure-and-reuse/template-element)
- [HTML structure and reuse](https://agentwranglers.se/playbook/html-css/html-structure-and-reuse)