Ce que construit le navigateur — exercice corrigé d'HTML : structurer le Web (école d'ingénieur) (chapitre 10)

Ce que construit le navigateur

Valider, bien écrire, et le projet de la Librairie · niveau 2

Énoncé

Pour chaque fragment invalide, dessiner l'arbre que construit le navigateur, et dire ce que change la réparation.

<p>un<div>deux</div>trois</p>
<table><tr><td>A</td></tr><p>hors</p></table>

Corrigé

Le paragraphe est fermé avant le <div> ; « trois » est hors de tout paragraphe ; le </p> orphelin crée un paragraphe vide :


body
  p « un »
  div « deux »
  #texte « trois »
  p

Un paragraphe n'a pas sa place entre les lignes d'un tableau. Le navigateur le déplace avant le tableau (on parle de foster parenting) ; il crée aussi l'élément <tbody>, implicite, autour de la ligne :


body
  p « hors »
  table
    tbody
      tr
        td « A »

Le texte « hors » s'affiche donc au-dessus du tableau, alors qu'il est écrit après sa première ligne.

Ces arbres sont ceux que construit l'algorithme d'analyse du standard (ils ont été obtenus avec la bibliothèque html5lib, qui l'implémente) ; les outils de développement du navigateur, onglet Éléments, montrent les mêmes.