Dans le cours : L'essentiel du HTML

Travailler avec des espaces - Tutoriel HTML

Dans le cours : L'essentiel du HTML

Démarrer mon mois d’essai gratuit Acheter pour mon équipe

Travailler avec des espaces

“

Explorons maintenant un comportement assez particulier de l'HTML concernant les espaces. Prenons pour exemple ce titre de niveau 1 que nous avons ici en ligne 8. Il est composé de trois mots, Lorem, ipsum et dolor. Je vais supprimer les espaces entre ces mots. Je sauvegarde, je reviens dans le navigateur, et sans surprise, vous voyez que j'ai mon titre ici qui est tout collé. Les espaces ne sont plus là, bien sûr. Si je remets une espace entre ces mots, je sauvegarde. Je reviens dans le navigateur, et toujours sans surprise, nous avons maintenant le titre ici qui s'affiche correctement. Maintenant, que se passe-t-il si dans le code HTML, je mets plein d'espaces ? Je sauvegarde. Je reviens dans mon navigateur, et là, surprise, on se rend compte que le navigateur n'honore que la première espace. Les autres espaces, c'est comme si elles n'existaient pas. On a déjà eu affaire à ce comportement de nos navigateurs, et de l'HTML. Rappelez- vous plus tôt dans ce chapitre, on avait un paragraphe. Dans ce paragraphe, on avait le nom d'une société. Ensuite sur la ligne suivante, on avait un nom de rue, sur la ligne suivante, un nom de ville. Et qu'est-ce que ça donnait dans le navigateur ? Ça donnait tout sur la même ligne mais avec, regardez, une espace ici entre ces différents mots. D'où vient cette espace ? Regardez entre société et rue, j'ai ici une série d'espaces et une série de tabulations. Tout ça est ramené à une seule espace par nos navigateurs. Même chose ici bien sûr entre rue et ville, c'est exactement la même histoire. Je vais supprimer ce paragraphe. C'était juste pour vous rappeler cela. Mais que se passe-t-il quand j'ai véritablement besoin d'avoir des espaces ? Dans ce cas-là, il y a un caractère spécial qui va nous aider. Donc ici, je vais remettre une seule espace. Et le caractère spécial en question, esperluette point-virgule pour les caractères spéciaux, c'est une espace insécable en anglais, on appelle ça un non breaking space, ou un nbsp pour non breaking space. Je vais faire la même chose ici de l'autre côté, esperluette point-virgule, nbsp. Et puis maintenant je vais copier-coller ces éléments-là plusieurs fois entre mes différents mots, copier et coller de nouveau. Et maintenant, grâce à ces espaces insécables, le navigateur va honorer toutes les espaces que j'ai mises dans le code HTML. Donc voici un comportement assez particulier de l'HTML ici et de nos navigateurs au niveau des espaces. Seule la première espace est honorée par le navigateur, les autres espaces sont ignorées, à moins d'utiliser ce caractère spécial, le non breaking space, dont je n'ai d'ailleurs pas besoin dans mon titre, donc je vais le retirer. Et voilà mon titre tel qu'il apparaîtra sur la version finale de mon projet.

Table des matières