Excessively Nested Divs

html.nested_divs

Severity

info

Remediation Complexity

medium

Remediation Risk

low

Remediation Effort

medium

Resource

Complexity

Language

Html

Description

Flags a <div> that sits inside too many other <div> elements. The nesting threshold is configurable through the maxDepth property (default 6): a <div> nested inside maxDepth or more opening <div> ancestors is reported.

Rationale

Deeply nested <div> elements ("div soup") inflate the DOM, complicate the CSS cascade and usually signal that semantic elements (such as <section>, <article>, <nav> or <header>) or a flatter layout technique would express the intent more clearly.

<div><div><div><div>
  <div>content</div>   <!-- FLAW — nested inside four divs -->
</div></div></div></div>

<div>flat content</div>  <!-- OK — no excessive nesting -->

Remediation

Flatten the markup and replace structural wrappers with semantic elements where possible. Modern layout techniques such as CSS grid and flexbox often remove the need for extra wrapper <div> elements.

References

MDN — the div element