Insérer des espaces en HTML : comment faire ?

La barre d'espace du clavier permet d'espacer les mots au moment de rédiger du texte dans un éditeur HTML. C'est-à-dire que le texte est tapé « naturellement », comme dans un logiciel de traitement de texte. Le navigateur toutefois ne rend pas systématiquement le résultat souhaité à l'écran. Taper trois fois sur la barre d'espace, par exemple, ne crée pas trois espaces. Des éléments HTML permettent de personnaliser la taille des espaces, de créer des espaces insécables ou encore d'espacer des mots d'un saut de ligne.

Comment faire un espace en HTML ?

Il y a une différence entre le texte tel qu'il est rédigé dans l'éditeur HTML, et le texte affiché par le navigateur sur l'écran de l'internaute. Pour s'assurer que le résultat soit conforme à ses exigences, il faut utiliser du code HTML qui sera rendu de manière identique par tous les navigateurs.

Plusieurs méthodes permettent de faire un espace en HTML. Tout dépend de l'objectif. Pour écrire du texte, taper sur la barre d'espace suffit à espacer les mots les uns des autres. Pour « forcer » le navigateur à afficher un signe de ponctuation double sur la même ligne que le dernier mot de la phrase, en revanche, il faut utiliser du code HTML spécifique. Des éléments HTML et CSS, en outre, permettent de contrôler avec précision la mise en forme du texte.

1 - Insérer un espace insécable avec  

  signifie « non-breaking space ». Écrire le code HTML   entre deux mots, au lieu de faire un espace avec la barre d'espace du clavier, espace les mots en s'assurant qu'ils restent sur la même ligne. On parle d'espace insécable. Faire un espace insécable avec le code HTML   sert à préserver la lisibilité des informations, tout en respectant les conventions d'écriture. Illustrations :

• Pour écrire des nombres très élevés, il est d'usage de séparer les chiffres par blocs de trois : 2 500 000, par exemple. Si le navigateur affiche une partie sur une ligne et une partie sur une autre ligne, cela manque de clarté. Écrire 2 500 000 évite ce risque : tous les chiffres du nombre s'affichent sur la même ligne.
• Le code HTML   est également utile pour les signes de ponctuation double. Les conventions imposent d'insérer un espace entre un mot et un point d'interrogation, un point d'exclamation, un point-virgule et deux-points. Entre des guillemets français, il faut insérer des espaces de part et d'autre du mot. Grâce à l'espace insécable, la ponctuation est lisible.

Pour insérer un espace insécable, il faut écrire   entre les deux mots ou avant le signe de ponctuation.

2 - Créer plus ou moins d'espace entre deux mots avec HTML

Taper sur la barre d'espace du clavier une fois ou mille fois crée le même résultat : le navigateur ne rend qu'un espace sur la page web.

See the Pen rendu-barre-espace_espace-html by HubSpot France (@HubSpot-France) on CodePen.

Du code HTML permet de personnaliser l'espacement de deux mots. La barre d'espace, ainsi que le code  , créent un espace d'une taille spécifique. Pour créer plus ou moins d'espace entre les mots :

• Le code HTML   peut être inséré autant de fois que nécessaire entre deux mots. Le navigateur comprend que chaque occurrence de   compte pour un espace. Pour trois occurrences, par exemple, le navigateur affiche trois fois un espace.
• Le code HTML  , pour « en space », crée un espace double.   équivaut donc à   .
• Le code HTML  , pour « em space », crée un espace quadruple.   équivaut à     .
• Le code HTML  , pour « thin space », crée un espace plus étroit que  .

Illustration :

See the Pen creer-espace-entre-deux-mots_espace-html by HubSpot France (@HubSpot-France) on CodePen.

Pour personnaliser l'espacement, il faut écrire   autant de fois qu'il faut d'espaces insécables.  ,   et   créent des espaces plus ou moins grands, mais sécables.

3 - Pré-formater les espaces avec l'élément HTML <pre>

Il est possible d'afficher les espaces tels que tapés avec la barre d'espace dans le code HTML. Il faut indiquer au navigateur que le texte doit être rendu exactement comme il apparaît dans l'éditeur de texte. L'élément HTML <pre>, pour « pré-formatage », permet ainsi d'insérer des espaces en HTML.

See the Pen balise-html-pre_espace-html by HubSpot France (@HubSpot-France) on CodePen.

Pour insérer des espaces avec l'élément HTML <pre> :

1. Ouvrir une balise <pre>.
2. Écrire le texte exactement comme il doit apparaître à l'écran. Un espace tapé avec la barre d'espace vaut alors un espace. Un saut de ligne et un retrait de texte avec la touche de tabulation, de même, sont restitués comme tels par les navigateurs.
3. Fermer la balise </pre>.

4 - Espacer des blocs de texte avec les éléments HTML <p> et <br>

Insérer des espaces entre les mots est indispensable pour rendre un texte lisible. Insérer de l'espace entre des blocs de texte est utile pour aérer une page web, ou pour mettre en valeur des informations : pour inciter à cliquer sur un lien HTML de redirection, par exemple. Les éléments HTML paragraphe <p> et saut de ligne <br> sont utilisés à cet effet.

See the Pen saut-de-ligne-et-paragraphe_espace-html by HubSpot France (@HubSpot-France) on CodePen.

Pour créer de l'espace avec un paragraphe HTML :

1. Ouvrir une balise <p>.
2. Écrire le paragraphe.
3. Fermer la balise </p>.

Pour créer de l'espace avec un saut de ligne HTML, il suffit d'insérer la balise <br> à l'endroit où il faut aller à la ligne. Il n'y a pas de balise fermante pour le saut de ligne.

La balise <div> en HTML, en tant qu'élément de bloc, permet également de créer de l'espace dans le texte de la page web.

5 - Utiliser CSS pour créer des espaces

Du code HTML peut être utilisé pour insérer des espaces dans le texte, ponctuellement, dans un enjeu de lisibilité. En ce qui concerne la mise en forme personnalisée des pages web, il est recommandé d'utiliser CSS. CSS permet d'appliquer un style à des éléments HTML : un formulaire, un bouton HTML ou du texte, notamment.

Explications : insérer un espace en début de paragraphe peut être réalisé avec l'élément HTML <pre> ou avec du code &nbsp;. Si la charte graphique du site web impose un espace à chaque début de paragraphe, conformément à la charte graphique, utiliser CSS est recommandé pour optimiser un site web.

Exemple d'utilisation de CSS pour insérer des espaces :

See the Pen marge-indentation-css_espace-html by HubSpot France (@HubSpot-France) on CodePen.

Dans cet exemple, le code HTML n'inclut pas d'éléments spécifiques pour créer des espaces. C'est CSS qui décrit les modalités d'espacement du texte.

Pour aller plus loin, découvrez comment effectuer des vérifications et des changements en masse dans votre code ou vos données en téléchargeant le guide sur les regex ; ou découvrez le CMS de HubSpot.