Comment faire un espace en HTML ?
Vous voulez mettre de l’espace entre vos mots en HTML ?
Vous voulez espacer du texte pour que ce soit plus lisible ?
Certaines choses comme les espaces peuvent sembler inutilement compliquées en HTML.
Mais ça ne doit pas être le cas, il existe plein de manières différentes de faire un espace en HTML.
Le moyen le plus simple d’ajouter des espaces en HTML est probablement d’utiliser l’entité HTML d’espace insécable :
<div>Exemple de code HTML avec plusieurs espaces.</div>Ce qui donne :
Dans cet article on va voir :
- Comment ajouter plusieurs espace sur une ligne en HTML ?
- Comment faire des retours à la ligne ?
- Comment ajouter des espaces en CSS ?
Découvrez toutes les manières de faire un espace en HTML !
1. Les entités HTML
Les entités HTML permettent d’insérer des caractères réservés, spéciaux ou codifiés dans le document HTML. Ces caractères ne sont pas présents sur le clavier. Il en existe plusieurs pour faire des espaces. La taille des espaces respectent les règles de la typographie standard pour le web.
Vous pouvez retrouver d’autres entités HTML sur Wikipédia comme par exemple le “non breaking space” ou espace insécable
&nbps;qu’on a déjà vu.
Voici une liste des entités HTML pour faire des espaces :
- [ ] :
(non breaking space) permet de faire un espace "insécable", alternative :  - [ ] :
 (thin space) permet de faire un demi espace ou un "espace fin", alternative :  - [ ] :
 (en space) permet de faire un double espace, la moitié d'un em, alternative :  - [ ] :
 (em space) permet de faire un quadruple espace, alternative :  - [ ] :
 (hair space) permet de faire un espace aussi fin qu'un cheveu, alternative :  - [ ] :
 (punctuation space) permet de faire un espace de ponctuation, alternative :  - [ ] :
 (numeric space) permet de faire un espace numérique, alternative :  - [ ] :
 (three-per-em space) un tier de la largeur d'un em, alternative :  - [ ] :
 (four-per-em space) un quart de la largeur d'un em, alternative :  - [ ] :
 (six-per-em space) un sixième de la largeur d'un em - [ ] :
 narrow no-break space, espace fine insécable
Concrètement, on peut jouer avec les espaces en insérant des “HTML Entities” comme ceci :
<div>
Exemple avec des espaces différents entre chaque mot de cette phrase
 !
</div>Ce qui donne :
On voit que certains espaces sont très grands alors que d’autres sont tellement fins qu’ils semblent presque invisibles.
💡 L’entité la plus utilisée est
que vous pouvez utiliser plusieurs fois pour cumuler les espaces. Les autres sont bien à connaître et savoir qu’elles existent. Et vous pourrez peut-être utiliser l’une ou l’autre si vous avez besoin d’un espace plus fin que le standard .
Tableau des entités HTML pour faire des espaces
| Entité HTML | Rendu | Description |
|---|---|---|
|
[ ] | (non breaking space) un espace "insécable" |
 
|
[ ] | (thin space) un demi espace ou un "espace fin" |
 
|
[ ] | (en space) un double espace, la moitié d'un em |
 
|
[ ] | (em space) un quadruple espace |
 
|
[ ] | (hair space) un espace aussi fin qu'un cheveu |
 
|
[ ] | (punctuation space) un espace de ponctuation |
 
|
[ ] | (numeric space) un espace numérique |
 
|
[ ] | (three-per-em space) un espace d'un tier de la largeur d'un em |
 
|
[ ] | (four-per-em space) un espace d'un quart de la largeur d'un em |
 
|
[ ] | (six-per-em space) un espace d'un sixième de la largeur d'un em |
 
|
[ ] | (narrow no-break space) un espace fine insécable |
2. La balise HTML de texte préformaté pre
En HTML, la balise <pre> préserve vos espaces et échappements contrairement aux autres balises. Le rendu du contenu d’une balise “pre” sera donc identique à son encodage HTML. Utiliser la balise “pre” permet donc d’ajouter des espaces comme on veut.
Par exemple, comparons la différences quand on met des espaces dans un <pre> plutôt que dans un <div> :
<div>
<div>Exemple de phrase dans un pre avec différents espaces. </div>
<pre>Exemple de phrase dans un pre avec différents espaces. </pre>
</div>Ce code HTML donnera :
Exemple de phrase dans un pre avec différents espaces.
On voit donc que la balise html “pre” respecte l’espacement qu’on lui a donné alors qu’une balise <div> enlève tous ceux qu’elle juge inutiles.
💡 Si vous voulez que l’apparence du texte dans votre balise
<pre>ressemble au reste du texte de votre page HTML, vous pouvez modifier son style en utilisant du CSS. Comme j’ai fait avec les propriétés CSSfont-family: inherit; font-size: inherit;dans l’exemple qu’on a vu plus haut.
3. La propriété text-indent en CSS
La propriété en CSS permet d’ajouter de l’espace en début de la première ligne d’un élément html comme <p>. On peut rajouter des espaces en utilisant les unités em pour ajouter l’equivalent d’un espace, ou bien px pour définir le nombre de pixel, cm ou bien un pourcentage.
Par exemple, le code HTML suivant avec les propriétés text-indent :
<div>
<div style="text-indent: 4em;">commentcoder.com</div>
<div style="text-indent: 20px;">commentcoder.com</div>
<div style="text-indent: 1cm;">commentcoder.com</div>
<div style="text-indent: 10%;">commentcoder.com</div>
</div>Donnera différentes tailles d’espacement en début de ligne.
4. La propriété text-align en CSS
Pour ajouter un nombre d’espaces indéfinis en debut de chaque ligne ou bien centrer du texte, on peut utiliser la propriété CSS text-align. text-align permet entre autres d’aligner son texte à droite, au centre ou à gauche (par défaut).
<div>
<div style="text-align: left;">commentcoder.com</div>
<div style="text-align: center;">commentcoder.com</div>
<div style="text-align: right;">commentcoder.com</div>
</div>Donnera différents alignement, à savoir gauche, milieux et droite respectivement.
5. Les margin et padding en CSS
On peut ajouter de l’espace autour de texte en HTML avec les propriétés CSS margin et padding. Margin ajoute de l’espace en dehors de l’élément alors que padding en ajoute à l’intérieur. Les margins et paddings utilisent les unités em, px, % et moins fréquemment ex, pt, cm, mm, in ou pc.
<div>
<span style="margin: 42px;">Exemple</span>
de phrase dans
<span style="padding: 42px;"> un div</span> avec différents
<span style="margin-right: 42px;"> margin</span> et
<span style="padding-left: 42px;"> padding</span>.
</div>Aller plus loin dans l’apprentissage du web !
Bravo 🎉 vous connaissez maintenant plein de manières différentes de faire des espaces en HTML !
Pour aller plus loin, j’ai écrit de nombreux tutoriels sur HTML, CSS et JavaScript mais aussi dans plein d’autres langages de programmation.
Si vous voulez apprendre comment faire des retours à la ligne, j’ai écrit un article Comment retourner à la ligne en HTML ?.
En pour aller plus loin, voici quelques articles qui pourront peut-être vous intéresser :
Je m'appelle Thomas. J'ai commencé à coder dans mon enfance. Depuis ma sortie de la première promo de l'École 42, j'ai développé des centaines d'applications et sites web. Sur ce blog, je vous donne les meilleurs conseils et astuces pour apprendre comment apprendre à coder efficacement.