Impact du code HTML sur le rendu final d'une page Web Espacement et mise en forme du code pour les éléments de type bloc

On considère généralement que la mise en forme du code HTML (retours à la ligne, indentation, espaces entre les balises) n'a aucun impact sur le rendu final. Il est possible, par exemple, d'écrire le code d'une page Web complète sur une seule ligne, ou bien de revenir systématiquement à la ligne pour chaque nouvelle balise, ou encore de laisser plusieurs lignes vides, pour "éclaircir" un code et en faciliter la lecture.

Même si cette conception est généralement vraie, il faut se méfier de ce genre de généralités. La mise en forme du code peut avoir des conséquences sur le rendu ! Petite mise au point...


Pas de problème à relever pour les éléments de type bloc


Pour les éléments de type bloc, le rendu final est indifférent à la mise en forme du code HTML (pourvu que la syntaxe HTML soit respectée, bien entendu !).

Ainsi, les deux rédactions suivantes auront le même rendu :

Exemple 1: 
<p>Premier paragraphe.</p><p>Deuxième paragraphe.</p> 
 
Exemple 2: 
<p>Premier paragraphe.</p> 
<p>Deuxième paragraphe.</p>

Attention à ne pas généraliser



Quant aux espaces pour le texte contenu dans un élément de type bloc, il y a deux cas :

  1.  soit les espaces sont au tout début ou tout à la fin du texte, et ils seront ignorés;
  2.  soit les espaces sont au sein du texte, et dans ce cas toute suite d'espaces sera réduite à une espace unique.


Le code suivant aura donc le même rendu que les exemples 1 et 2 :

Exemple 3: 
    <p>        Premier                   paragraphe.        </p> 
<p> 
    Deuxième paragraphe. 
</p>

On constate donc que la gestion de l'indentation du texte ou des espaces excédentaires en HTML est particulièrement souple. Mais attention à ne pas généraliser cette constatation aux éléments de type en-ligne !