Un document HTML est composé d'autant de boîtes qu'il comporte d'instructions HTML. En effet, le seul fait de placer un élément dans le corps de la page Web,tel qu'une liste, un tableau ou une commande de formatage quelconque, provoque la création d'une boîte.

De même que le fait d'emboîter ces éléments, en appliquant par exemple une mise en gras <b> ou en évidence <em> dans un paragraphe <p>, produit, à fortiori, une imbrication des boîtes plus ou moins complexe selon les cas.

La génération de ses boîtes permet de conserver au document une certaine homogénéité ainsi qu'une hiérarchie d'affichage au sein des éléments HTML.

LES BOITES

Le W3C distingue différents types de boîte oûtre la boîte principale générée par la balise <body> contenant obligatoirement toutes les autres balises composant la page Web affichée dans le navigateur.

LES BOITES PRINCIPALES

Lorsqu'un élément HTML a la fonction de générer des blocs contenants, c'est-à-dire étant susceptible d'accueillir un contenu comme du texte ou des images entre autres, à l'image les balises <div>, <p>, les listes <ul>, <ol> et <dt> ou encore les éléments de table tels que <table>, <td>, <th>, on dit qu'ils produisent des boîtes principales dont la mission sera d'accueillir d'autres éléments HTML.

LES BOITES EN LIGNE

Diverses commandes HTML permettant notamment la mise en forme des caractères comme <U>, <strike>, <address>, <big>, <code>, <kbd>, etc., constituent des boîtes en ligne à l'intérieur des boîtes principales, dans la mesure ou elles créent leur propre zone de formatage.

LES BOITES ANONYMES

D'autre-part, Les éléments compris dans une boîte principale et ne faisant pas partie de boîtes en ligne sont appelés des boîtes anonymes. Par exemple dans un tableau, la plupart des cellules n'étant pas formatée spécifiquement provoque l'apparition de plusieurs boîtes anonymes.

<
b
o
d
y
>
<div>
<h1> TITRE </h1>
<p>
Ce tableau vous montre les différents
<b> niveaux de blocs </b>
et leur
<i> possible imbrication. </i>
</p>
</div>
<h4>
UN
<em> TITRE </em>
</h4>
<ol>
<li> 1. Premier item </li>
<li> 2. Second Item </li>
<li> 3. Troisième item </li>
<li> 4. Quatrième item </li>
</ol>
Ce contenu résulte d'une boîte anonyme.
<
/
b
o
d
y
>

Voici un exemple complexe d'imbrications et d'empilements de boîtes. En haut, l'illustration de la génération des boîtes et en bas le code de cette démonstration.

<html>
<body>
  <div>
    <h1>TITRE</h1> 
    <p>Ce tableau vous montre les différentes 
      <b>niveaux de blocs</b> 
      et leur <I>possible imbrication.</I> 
    </p> 
  </div>
  <h2>UN <em>TITRE</EM></h2>
  <ol>
    <li>Premier item</li>
    <li>Deuxième item</li>
    <li>Troisième item</li>
    <li>Quatrième item</li>
  </ol>
  Ce contenu résulte d'une boîte anonyme.
</body>
</html>