Pour ajouter une espace insécable en HTML, le code le plus simple à utiliser est :
Ainsi :
25 €permet de conserver 25 € sur la même ligne, même si le navigateur doit effectuer un retour à la ligne.
Il existe toutefois plusieurs façons de représenter une espace insécable, ainsi qu’une variante particulièrement utile en français : l’espace fine insécable.
Voici les codes essentiels à retenir :
| Type d’espace | Code HTML | Unicode | Retour à la ligne autorisé ? |
|---|---|---|---|
| Espace normale | | U+0020 | Oui |
| Espace insécable | | U+00A0 | Non |
| Espace insécable numérique |   | U+00A0 | Non |
| Espace insécable hexadécimale |   | U+00A0 | Non |
| Espace fine |   | U+2009 | Oui |
| Espace fine insécable |   | U+202F | Non |
| Espace fine insécable hexadécimale |   | U+202F | Non |
Unicode distingue bien l’espace insécable U+00A0, l’espace fine U+2009 et l’espace fine insécable U+202F.
Codes d’espaces HTML à copier
Cliquez sur un code pour le copier dans le presse-papiers.
Qu’est-ce qu’une espace insécable en HTML ?
Une espace insécable ressemble visuellement à une espace ordinaire. Sa particularité est invisible : elle empêche le navigateur d’effectuer un retour à la ligne entre les deux éléments qui l’entourent.
Prenons cette expression :
25 €Avec une espace classique, le navigateur peut théoriquement afficher :
25
€si la largeur disponible devient insuffisante.
Avec :
25 €le nombre et son symbole restent liés.
L’espace insécable standard correspond au caractère Unicode U+00A0 NO-BREAK SPACE. Le W3C indique qu’elle peut être écrite de plusieurs manières en HTML : ,   ou  .
Les trois façons de créer une espace insécable en HTML
Utiliser
C’est la méthode la plus connue et généralement la plus lisible dans un fichier HTML.
<p>Le fichier pèse 25 Mo.</p>Le navigateur comprend comme une référence au caractère U+00A0.
Utiliser le code décimal  
Exactement le même caractère peut être écrit sous sa forme numérique décimale :
<p>Le fichier pèse 25 Mo.</p>Le résultat est identique à :
<p>Le fichier pèse 25 Mo.</p>Utiliser le code hexadécimal  
Une troisième possibilité consiste à utiliser la valeur Unicode en notation hexadécimale :
<p>Le fichier pèse 25 Mo.</p>Ces trois écritures représentent donc le même caractère :
U+00A0 NO-BREAK SPACELes références numériques HTML sont interprétées à partir de leurs points de code Unicode.
Dans quels cas utiliser une espace insécable ?
L’espace insécable devient particulièrement utile lorsque deux éléments doivent rester visuellement associés.
Entre un nombre et son unité
10 km32 Go500 g18 °CCela évite qu’une unité se retrouve isolée au début de la ligne suivante.
Entre un montant et une monnaie
Exemple :
49 €ou :
1 250 €Les montants restent ainsi plus faciles à lire sur les écrans étroits.
Avant certains signes de ponctuation française
La typographie française utilise des espaces devant plusieurs signes de ponctuation haute.
Un exemple simple avec une espace insécable :
Attention !Pour une composition typographique plus fine, U+202F peut être préférable dans certains cas :
Attention !U+202F est précisément défini par Unicode comme une NARROW NO-BREAK SPACE, c’est-à-dire une version étroite de l’espace insécable pouvant notamment être utilisée avec la ponctuation française.
Avec les guillemets français
Il est également possible d’éviter qu’un guillemet français soit isolé :
« Bonjour »Pour maintenir une abréviation et un mot ensemble
Par exemple :
Dr MartinL’objectif reste toujours le même : empêcher une coupure visuellement gênante entre deux éléments étroitement liés.
Quelle différence entre une espace normale et ?
Il ne s’agit pas seulement d’une différence concernant les retours à la ligne.
Dans une page HTML affichée avec le comportement habituel white-space: normal, les suites d’espaces ordinaires sont généralement regroupées lors du rendu.
Ainsi, écrire :
Bonjour mondene permet normalement pas d’obtenir dix grandes espaces visibles entre les deux mots.
En revanche, une espace insécable U+00A0 n’entre pas dans cette même logique de fusion des espaces ordinaires.
C’est pourquoi :
Bonjour mondepeut produire plusieurs espaces visibles.
Mais ce n’est pas une bonne méthode pour créer une mise en page.
Pourquoi éviter d’utiliser plusieurs pour espacer des éléments ?
Il peut être tentant de créer un décalage de cette manière :
Nom PrixCette technique mélange contenu et présentation.
Pour créer une marge ou un espacement entre des blocs, il est préférable d’utiliser CSS :
<div class="produit">
<span>Produit</span>
<span>29 €</span>
</div>.produit {
display: flex;
gap: 30px;
}On peut également utiliser selon le besoin :
margin
padding
gap doit avant tout être utilisé lorsqu’une espace fait réellement partie du texte et doit empêcher une coupure de ligne.
Espace insécable ou espace fine insécable ?
C’est une distinction importante.
Espace insécable classique
Code :
Unicode :
U+00A0Elle possède globalement la fonction d’une espace normale tout en supprimant l’opportunité de coupure de ligne.
Espace fine insécable
Code décimal :
 Code hexadécimal :
 Unicode :
U+202FElle est plus étroite et reste insécable. Unicode la décrit comme la version étroite de U+00A0 et cite notamment son utilisation dans la typographie française.
Exemple :
Vraiment ?Attention :   n’est pas une espace fine insécable
Cette confusion est fréquente.
Le code :
 représente le caractère :
U+2009 THIN SPACEIl s’agit bien d’une espace fine, mais elle n’est pas identique à U+202F NARROW NO-BREAK SPACE. Unicode répertorie ces deux caractères séparément.
Si l’objectif est uniquement d’obtenir une petite espace :
 peut être utilisé.
Si l’objectif est d’obtenir une petite espace tout en empêchant un retour à la ligne, utilisez plutôt :
 ou :
 Comment empêcher le retour à la ligne sur plusieurs mots avec CSS ?
est idéal lorsque la liaison concerne deux éléments précis.
Mais pour empêcher la coupure de toute une expression, CSS est souvent plus pratique.
HTML :
<span class="sans-coupure">Livraison gratuite</span>CSS :
.sans-coupure {
white-space: nowrap;
}La propriété white-space contrôle notamment la façon dont les retours à la ligne sont gérés dans un élément. nowrap interdit le retour automatique à la ligne.
Cette solution est particulièrement intéressante pour :
- des prix ;
- des références ;
- des boutons ;
- des expressions courtes ;
- des éléments d’interface ;
- des cellules de tableau.
Il faut toutefois rester prudent avec les longues expressions : empêcher toute coupure peut provoquer un débordement horizontal sur un petit écran.
Faut-il utiliser la balise <nobr> ?
On rencontre parfois encore du code de ce type :
<nobr>Texte à ne pas couper</nobr>Cette solution est à éviter.
L’élément <nobr> est considéré comme obsolète et n’a jamais fait partie du HTML standard recommandé pour les nouveaux développements. MDN recommande de le remplacer par CSS et white-space: nowrap.
Utilisez donc :
<span class="nobr">Texte à ne pas couper</span>avec :
.nobr {
white-space: nowrap;
}Espace insécable et WordPress
Dans WordPress ou dans un autre CMS, il est possible d’insérer directement l’entité HTML dans une zone acceptant du code :
25 €Pour une espace fine insécable :
25 €Si l’éditeur visuel transforme automatiquement le contenu, vérifiez simplement le rendu final de la page.
Un test très simple consiste à réduire fortement la largeur de la fenêtre du navigateur. Si les deux éléments restent ensemble au moment du retour à la ligne, l’espace insécable fonctionne correctement.
Exemples HTML prêts à copier
Nombre et unité
<p>Distance : 25 km</p>Prix
<p>Prix : 99 €</p>Ponctuation
<p>Vous êtes sûr ?</p>Guillemets français
<p>Il répondit : « oui ».</p>Groupe complet protégé avec CSS
<span class="nowrap">Offre limitée</span>.nowrap {
white-space: nowrap;
}Les erreurs les plus fréquentes
Une première erreur consiste à ajouter une espace ordinaire avant :
25 €Il vaut mieux écrire directement :
25 €Autre erreur : confondre :
 et :
 La première est une espace fine U+2009, la seconde une espace fine insécable U+202F.
Enfin, évitez les dizaines de destinées uniquement à déplacer artificiellement un élément. CSS est beaucoup plus adapté à la gestion des marges, espacements et alignements.
FAQ sur les espaces insécables en HTML
Quel est le code HTML d’une espace insécable ?
Le code le plus courant est :
Les formes :
 et :
 représentent le même caractère Unicode U+00A0.
Quel est le code HTML d’une espace fine insécable ?
Utilisez :
 ou :
 Il s’agit du caractère Unicode U+202F NARROW NO-BREAK SPACE.
  est-il insécable ?
Non.   correspond à U+2009 THIN SPACE. Il ne faut pas le confondre avec U+202F NARROW NO-BREAK SPACE.
Comment empêcher deux mots de se séparer ?
Pour deux éléments seulement :
premier secondPour protéger une expression entière :
white-space: nowrap;La seconde solution est préférable lorsque plusieurs mots ou éléments doivent rester groupés.
Peut-on mettre plusieurs à la suite ?
Oui, mais ils ne doivent pas être utilisés pour construire une mise en page. Pour créer des espacements visuels entre des éléments, les propriétés CSS comme gap, margin ou padding sont plus adaptées.
Quelle méthode choisir ?
Pour la majorité des besoins :
Pour une typographie française plus fine :
 Pour empêcher toute une expression de revenir à la ligne :
white-space: nowrap;Ces trois solutions couvrent l’essentiel des situations rencontrées dans une page HTML.