Blog Alsacréations

Espacement et mise en forme du code 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 :

1)
<p>Premier paragraphe.</p><p>Deuxième paragraphe.</p>

2)
<p>Premier paragraphe.</p>
<p>Deuxième paragraphe.</p>

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.

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 !

Le cas des éléments de type en-ligne

Commençons avec un exemple simple :

4)
<p><span>alsacreation</span><span>s</span></p>
<p><span>alsacreation</span> <span>s</span></p>
<p><span>alsacreation</span>
<span>s</span></p>

Avec ce code, on obtiendra le rendu suivant :

alsacreations
alsacreation s
alsacreation s

On remarque que le cas où les deux span sont séparés d'une espace donne le même rendu que lorsque le deuxième span passe à la ligne. Pourtant, dans ce dernier cas, on n'a pas utilisé le moindre caractère « espace » !

L'explication est simple : on n'a pas utilisé de caractère « espace », mais on a utilisé d'autres caractères d'espacement. Les caractères d'espacement sont, pour les plus courants : l'espace, la tabulation, et le retour à la ligne.

Par conséquent, les deux notations suivantes sont équivalentes :

5)
<span>alsacreation</span> <span>s</span>

6)
<span>alsacreation</span>
<span>s</span>

Ici, c'est le retour à la ligne (retour chariot) qui est interprété comme une espace.

Tout cela semble simple et évident lorsqu'il s'agit de texte et de chaînes de caractère. Si l'on coupe un mot, alors on verra apparaître une espace à l'endroit de la coupure... cela tombe sous le sens.

Par contre, on se laisse parfois surprendre pour le même comportement, que l'on trouvait « logique » dans le cas d'une chaîne de caractères, dans les cas où il ne s'agit pas de lettres, mais d'autres éléments de type en-ligne, comme par exemple des images.

Un problème classique : les espaces indésirables dans une succession d'images

Si vous voulez obtenir une succession d'images de petite ou moyenne taille sur une même ligne, vous pouvez écrire :

7)
<p><img src="texte-1.png" alt="Ceci" /><img src="texte-2.png" alt="est un" /><img src="texte-3.png" alt="exemple" /></p>

Mais comme le code pour les informations des images (texte alternatif, emplacement de l'image) est un peu long, on aura tendance à les mettre sur plusieurs lignes de code :

8)
<p>
	<img src="texte-1.png" alt="Ceci" />
	<img src="texte-2.png" alt="est un" />
	<img src="texte-3.png" alt="exemple" />
</p>

Les deux notations ne sont pas équivalentes. Il faut imaginer que chaque image est un caractère : « a », « b » et « c ». Si on écrit « a b c », ça n'est pas la même chose que si l'on écrit « abc » !
On aura donc, dans le cas du code sur plusieurs lignes (exemple 8), des espaces entre les images. Si on voulait que les images soient complètement collées, c'est raté.

Un cas-limite : espaces excédentaires entre des items de liste avec IE/Win

Laurent Denis décrit le cas de la prise en compte des espaces non significatifs dans les listes dont les items sont dotés de layout :

Une liste non ordonnée contenant des éléments span (ou tout autre élément de type en ligne tels que des liens) en display:block ne s'affiche pas normalement sous IE Windows qui ne fusionne pas les espaces non significatifs dans le balisage.

Il s'agit d'un bug très particulier d'Internet Explorer Windows, mais que l'on rencontre tôt ou tard, et qui se manifeste par des items de liste (souvent ceux d'un menu de navigation vertical) qui s'écartent très fortement en hauteur, de façon inexpliquée.

Le bug (détaillé, avec une solution, dans la page du lien ci-dessus) fait que les espaces normalement non significatifs (retours à la ligne, tabulations, espaces) deviennent des lignes vides entre les items de liste. Ce n'est pas censé arriver, car les éléments li sont des éléments de type bloc !

Pour résoudre ce bug, deux solutions :

1. soit on combat « le mal par le mal » en appliquant le layout aux éléments de type en-ligne en display: block qui déclenchent le problème ;
2. soit on supprime les espaces non significatifs de la liste, c'est à dire que l'on met tout le code de la liste sur une seule ligne.

Un billet de Florent Verschelde (mpop).