Le contenu d'un élément peut être du contenu simple, mais également un autre élément. C'est ce qui fait toute la puissance de HTML et des langages de balisages.

Quand on reprend notre exemple de document simple, on peut clairement voir l'imbrication des éléments car elle est intentionnellement et physiquement marquée par l'indentation du code.

Dans l'exemple ci-dessus, on trouve les imbrications suivantes :

• l'élément html contient deux éléments : head et body,
• l'élément head contient un élément : title,
• l'élément body contient trois éléments : deux p et un ul qui contient trois élémentsli.
• certains éléments li contiennent un élément strong.
• un élément p contient deux élément : img et a.

Ce principe des poupées russes peut être schématisé graphiquement de la façon suivante :

Ce type de représentation est appelé un arbre DOM (Document Object Model). Il est très utilisé pour définir les héritages des styles de mise en forme que l'on pourra appliquer à tel ou tel noeud du graphe, ou avec JavaScript pour atteindre tel ou tel élément, en modifier dynamiquement les noeuds et donc la structure du document.

Il peut y avoir autant de niveaux d'imbrication que l'on veut dans un document. Bien sûr plus les niveaux d'imbrications seront nombreux et plus le travail du navigateur pour parser le code HTML sera difficile et plus l'arbre DOM sera complexe. L'arbre DOM étant stocké en mémoire sous la forme d'une structure de données, il est toujours avantageux que celui-ci soit le plus simple possible. Tous les traitements se feront également plus vite : le parsing du code HTML, le calcul des héritages de styles de mise en forme, l'accès aux objets du graphe par JavaScript.

<ul>
	<li>Des balises sont utilisées pour marquer
		la structure du document.
	</li>
</ul>	

<ul>
	<li>Des balises sont utilisées pour marquer
		la structure du document.
</ul>
</li>

Certains éléments doivent obligatoirement être imbriqués dans un certain ordre. C'est le cas par exemple pour réaliser des listes ou des tableaux de données.