### Imbrications

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.

Exemple : une page html
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Exemple de page</title> </head> <body> <p>Je suis un exemple de document HTML.</p> <ul> <li>On utilise <strong>des balises</strong> pour marquer la structure du document.</li> <li>Les balises ont une <strong>syntaxe particulière</strong>.</li> <li>Elles permettent de donner du sens aux informations en définissant par exemple ici un paragraphe et une liste.</li> </ul> <p><img src="info.png">C'est le <a href="http://w3.org">W3C</a> qui définit les balises.</p> </body> </html>

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éments`li`.
- 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 :

graphe d'imbrications

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.

Il faut veiller à réaliser des imbrications correctes (et pas des chevauchements) : l'élément A est imbriqué dans l'élément B quand les balises de début et de fin de l'élément A sont entièrement contenues dans les balises de début et de fin de l'élément B

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

L'élément `li` est correctement imbriqué dans l'élément `ul` car la balise de fermeture `</li>` vient bien avant `</ul>`;. Autrement dit l'élément `li` est totalement contenu dans l'élément `ul`

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

L'élément `li` n'est pas correctement imbriqué dans l'élément `ul` mais le chevauche car la balise `</ul>` se trouve entre `<li>` et `</li>`. Aucun élément ne contient totalement l'autre.

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.