Quiz Entry - updated: 2026.07.05
What is the DOM tree structure and why is proper nesting important?
HTML elements nest inside one another to form a tree (the DOM), and the nesting must be correct: an inner element must close before its outer one.
Because every element sits inside another — <head> and <body> inside <html>, paragraphs inside the body, and so on — the document forms a tree of parent-and-child relationships, much like a family tree. The browser builds this tree in memory as the DOM (Document Object Model). An opening <tag> marks where an element begins and a matching </tag> marks where it ends.
The one rule you must respect is that tags have to close in the reverse order they opened — innermost first:
<div><p>Text</p></div> <!-- correct: <p> closes before <div> -->
<div><p>Text</div></p> <!-- wrong: the tags cross over -->
Why it matters in practice:
- A browser will try to recover from bad nesting, but the resulting tree may not be what you intended, so the page can render unpredictably.
- CSS and JavaScript select elements by walking this tree, so a wrong structure breaks your styles and scripts.
- Screen readers and other accessibility tools also rely on a well-formed tree to convey the page correctly.
Go deeper:
Document Object Model — Wikipedia — concept overview with a worked tree diagram of an HTML document's node hierarchy.