Décrivez les espaces en HTML et leur utilisation…

Les espaces en HTML, également appelés "espaces blancs", sont des caractères non affichés par le navigateur (espaces, tabulations, caractères de nouvelle ligne). Les navigateurs les regroupent généralement en un seul espace lors du rendu, sauf dans certains éléments et propriétés CSS.

Utilisation :

Améliorer la lisibilité du code : Les développeurs utilisent des espaces pour séparer visuellement les éléments dans le code source HTML, le rendant plus compréhensible et structuré. Cela n'affecte pas l'affichage de la page dans le navigateur.
Séparer les éléments en ligne : Les navigateurs insèrent automatiquement un espace entre les éléments en ligne placés côte à côte dans le code HTML. Ce comportement peut être modifié avec CSS.
Éléments conservant les espaces :
- <pre> : Conserve tous les espaces et sauts de ligne, en formatant le texte exactement comme il est dans le code source.
- <code> : Généralement utilisé à l'intérieur de <pre> pour maintenir le formatage du code.
- <textarea> : À l'intérieur d'un champ de texte, les espaces et sauts de ligne sont conservés.
Propriété CSS white-space : Permet de contrôler la façon dont le navigateur traite les espaces à l'intérieur d'un élément :
- normal (par défaut) : Regroupe les espaces, les sauts de ligne sont ignorés (sauf <br>).
- nowrap : Regroupe les espaces mais empêche les sauts de ligne.
- pre : Équivalent à l'utilisation de la balise <pre>.
- pre-wrap : Conserve les espaces et les sauts de ligne, et permet également le retour à la ligne automatique selon la largeur du conteneur.
- pre-line : Regroupe les espaces mais conserve les sauts de ligne.

Exemple de regroupement des espaces :

HTML :

<p>
    Beaucoup d'espaces

    et
    sauts
    de ligne
</p>

Résultat dans le navigateur :

Beaucoup d'espaces et sauts de ligne

Exemple avec <pre> :

HTML :

<pre>
    Les espaces sont
        tous
            conservés
    et
    les sauts
</pre>

Résultat dans le navigateur :

    Les espaces sont
        tous
            conservés
    et
    les sauts

Exemple avec CSS white-space :

HTML :

<div class="pre-wrap">
    Ce texte conservera
        ses espaces
            et sauts

    de ligne,
    et s'ajustera également à la largeur.
</div>

CSS :

.pre-wrap {
    white-space: pre-wrap;
    border: 1px solid black;
    width: 150px;
}

Décrivez les espaces en HTML et leur utilisation.