Les espaces et retours à la ligne en HTML

Dans cette nouvelle leçon, nous allons voir comment déclarer des espaces et des retours à la ligne dans notre code HTML qui vont être conservés dans le rendu de la page fait par le navigateur.

 

Les espaces et les retours à la ligne dans le code ne sont pas rendus

Les plus curieux d’entre vous auront, je suppose, déjà fait le test : vous pouvez ajouter autant d’espaces que vous le voulez au sein d’un paragraphe ou d’un titre ou effectuer des retours à la ligne dans votre code, ceux-ci ne seront jamais affichés visuellement dans votre navigateur.

En effet, pour effectuer des retours à la ligne ou marquer des espaces en HTML, nous allons à nouveau devoir utiliser des éléments.

Pensez bien à nouveau que le navigateur va simplement interpréter votre code pour afficher un résultat et pour cela il va se baser sur les éléments HTML fournis.

 

Les retours à la ligne en HTML

Pour effectuer un retour à la ligne en HTML nous allons devoir utiliser l’élément br qui est représenté par une unique balise orpheline.

Le nom de l’élément br est l’abréviation de « break », l’équivalent de « casser » en anglais (dans le sens de « casser une ligne »).

On peut utiliser autant d’éléments br que l’on souhaite au sein d’un titre ou d’un paragraphe par exemple.

See the Pen Cours HTML CSS 2.6.1 by Pierre (@pierregiraud) on CodePen.

 

Les changements de thématique en HTML

Parfois, au sein d’un article par exemple, vous aborderez des thématiques différentes que vous voudrez séparer.

Dans ce cas-là, il peut être intéressant d’utiliser l’élément hr plutôt que br. L’élément hr a justement été créé pour définir un retour à la ligne avec changement de thématique. Tout comme br, cet élément est représenté par une balise orpheline.

See the Pen Cours HTML CSS 2.6.2 by Pierre (@pierregiraud) on CodePen.

 

La gestion des espaces en HTML

Il n’existe pas à proprement parler d’élément permettant de définir les espaces en HTML. Cependant, des solutions existent pour ajouter des espaces au sein de nos textes qui vont être conservés dans le rendu visuel. On va ainsi pouvoir :

• Utiliser l’élément HTML de préformatage pre ;
• Utiliser des entités HTML ;
• Utiliser les marges CSS (dont nous parlerons dans le chapitre qui leur est consacré).

L’élément HTML pre

L’élément pre sert à préformater un texte. Cela signifie que tout le contenu qui se trouve à l’intérieur de cet élément va conserver la mise en forme que nous allons lui donner lors du rendu fait par le navigateur.

See the Pen Cours HTML CSS 2.6.3 by Pierre (@pierregiraud) on CodePen.

Attention ici : le contenu va s’afficher exactement de la même façon que dans votre éditeur par rapport à la page complète de code. C’est la raison pour laquelle j’ai enlevé l’indentation ici.

Pour des raisons de sémantique, on essaiera tant que possible de se passer de cet élément HTML qui ne possède pas de sens en soi mais qui sert justement à conserver des mises en forme… Ce qui est plutôt le rôle du CSS normalement. On préfèrera tant que possible utiliser le CSS pour ce genre d’opérations de mise en forme.

Les entités HTML

Une entité HTML est une suite de caractère qui est utilisée pour afficher un caractère réservé ou un caractère invisible (comme un espace) en HTML.

Qu’est-ce qu’un caractère réservé ? C’est un caractère qui possède déjà une signification particulière en HTML. Par exemple, imaginions que l’on souhaite afficher le caractère < dans un texte.

On ne va pas pouvoir mentionner ce caractère tel quel dans notre éditeur car le navigateur va interpréter cela comme l’ouverture d’une balise d’un élément. Il va donc falloir indiquer au navigateur qu’on souhaite afficher le caractère < en tant que tel et non pas ouvrir une balise.

Pour cela, il va falloir échapper le sens de ce caractère, et c’est ce à quoi vont nous servir les entités HTML. Nous aurons l’occasion de reparler de ces entités HTML plus tard dans cette partie. Pour le moment, concentrons-nous sur celles qui nous intéressent à savoir celles qui vont nous permettre d’ajouter des espaces.

• L’entité HTML   (« non breaking space ») va nous permettre d’ajouter une espace simple dit espace « insécable » ;
• L’entité HTML   (« en space ») va nous permettre de créer une espace double ;
• L’entité HTML   (« em space ») va nous permettre de créer une espace quadruple ;
• L’entité HTML   (« thin space ») va nous permettre de créer un espace très fin (demi-espace).

See the Pen Cours HTML CSS 2.6.4 by Pierre (@pierregiraud) on CodePen.

Comme vous pouvez le voir, les espaces sont bien créés. Ici, je n’ai utilisé qu’une entité entre chaque caractère mais rien ne vous empêche d’en utiliser plusieurs d’affilée.

Notez cependant que l’utilisation des entités HTML à cette fin devrait toujours être une solution de dépannage et qu’on préférera généralement laisser toutes les questions de mise en page au CSS tant que possible.