Comment insérer des espaces dans un code HTML

Informations concernant l'auteur.e

Vous savez faire des espaces multiples et des sauts de ligne dans un traitement de texte classique, mais le savez-vous dans une page web ? Le langage HTML, qui sous-tend les pages web, a ses règles et si vous codez un texte avec plusieurs espaces entre chaque mot, HTML n'en restituera qu'un seul.

Méthode 1

Méthode 1 sur 3:

Insérer un espace en langage HTML

1
Ouvrez un document HTML. Ouvrez-le avec un éditeur de texte brut (NotePad ou TextEdit sous Windows, Text-Edit Plus sous macOS) ou avec un éditeur de site web (Adobe Dreamweaver). Pour ouvrir un document HTML déjà préparé, opérez comme suit :
- retrouvez votre document HTML en utilisant l'Explorateur de fichiers (Windows) ou le Finder (Mac) ;
- faites un clic droit sur le document HTML que vous voulez modifier ;
- dans le menu, placez le curseur sur Ouvrir avec ;
- cliquez sur le programme avec lequel votre document doit s'ouvrir.
2
Appuyez sur la barre d'espace pour ajouter un espace normal. En HTML, si dans votre texte, vous faites un espace avec la barre d'espace, vous aurez un espace. Si vous en faites 4, 10 ou 100, vous n'aurez qu'un espace dans la page web.
3
Tapez   pour avoir une espace insécable. Cela signifie que les deux entités (mots, chiffres,etc.) de part et d'autre du symbole resteront ensemble et sur la même ligne ^{[1]
X
Source de recherche}.
- Ainsi, si vous tapez Bonjour  le monde !, vous aurez deux espaces entre "Bonjour" et "le monde !".
- Si ce caractère est bien pratique, il ne faut pas en mettre plusieurs d'affilée, car les navigateurs vont y perdre leur… HTML ^{[2]
  X
  Source de recherche} !
- Pour obtenir un espace supplémentaire, tapez  .
4
Insérez des espaces de différentes largeurs. Vous pouvez insérer des espaces plus larges grâce à une des options suivantes ^{[3]
X
Source de recherche} :
- pour deux espaces : tapez &ensp; ;
- pour quatre espaces : tapez &emsp; ;
- pour un retrait : tapez     .
Publicité

Méthode 2

Méthode 2 sur 3:

Insérer un espace avec une feuille de style CSS

1
Ouvrez un document HTML ou CSS. Le code CSS peut être dans le document HTML ou dans une feuille de style externe.
- L'entête d'un document HTML se trouve… en tête du document ! Ses caractéristiques s'inscrivent entre les balises <head> et </head>.
2
Créez une section pour le style. C'est là que vous taperez votre code CSS. La définition du style s'inscrit dans l'entête du document HTML ou dans une feuille de style qui sera appelée depuis le document HTML. La structure est la même dans du HTML ou dans une feuille à part :
- tapez <style>. Toute instruction CSS s'inscrit obligatoirement après cette balise ;
- tapez </style>. Quand vous en terminez avec votre code CSS, c'est la balise qu'il faut mettre.
3
Tapez la balise d'indentation. Elle est la suivante : p {indent-text: 5em ;} et sera mise entre les deux balises de style. Le retrait obtenu est de 5 espaces vers la droite.
- Libre à vous de modifier le nombre d'espaces, en remplaçant 5 par la valeur que vous voulez !
- L'unité « em » est passepartout : c'est l'espace qui correspond à la police de caractères utilisée. Il est possible de remplacer em par un pourcentage (indent-text: 15 %;) ou une unité de mesure (indent-text: 3mm ;).
4
Tapez <p> autant de fois que nécessaire. Vous avez défini que tous les paragraphes auraient un retrait de 5 espaces. Chaque fois que, dans le corps du document, vous taperez la balise <p>, vous aurez un paragraphe en retrait de 5 espaces.

Publicité

Méthode 3

Méthode 3 sur 3:

Obtenir un retrait avec du texte préformaté

1
Ouvrez un document HTML. Ouvrez-le avec un éditeur de texte brut (NotePad ou TextEdit sous Windows, Text-Edit Plus sous macOS) ou avec un éditeur de site web (Adobe Dreamweaver).Pour ouvrir un document HTML déjà préparé, opérez comme suit :
- retrouvez votre document HTML en utilisant l'Explorateur de fichiers (Windows) ou le Finder (Mac) ;
- faites un clic droit sur le document HTML que vous voulez modifier ;
- dans le menu, placez le curseur sur Ouvrir avec ;
- cliquez sur le programme avec lequel votre document doit s'ouvrir.
2
Tapez <pre> juste avant le texte devant être préformaté. C'est la balise d'ouverture de tout texte de ce type.
3
Tapez le texte que vous voulez après cette balise. Tapez-le normalement avec ses espaces, ses sauts de lignes (obtenus en appuyant sur la touche Entrée). Avec cette balise, tout sera restitué à l'identique sur votre navigateur ^{[4]
X
Source de recherche}.
4
Tapez </pre> à la fin de votre texte. Ainsi sera fermé le passage préformaté.

Publicité

Conseils

Si, après chargé votre fichier HTML, votre navigateur rend des choses étranges, c'est certainement que vous n'avez pas utilisé un éditeur de texte brut. Les traitements de texte, justement parce qu'ils « traitent » le texte, ne sont pas recommandés.
Le langage CSS est très puissant et permet de faire des feuilles de style remarquables, des espacements entre autres choses. Son inconvénient est que le codage demande du temps et pour amortir celui-ci, il faut beaucoup s'en servir.
L'espace insécable   est bien pratique et incontournable, dans la mesure où il n'est pas possible de l'obtenir avec le clavier : vous aurez ainsi un beau rendu sur vos pages web.

Avertissements

En HTML, appuyer dans un texte sur la touche de tabulation (↹) ou entrer le code 	 ne rendront rien dans le navigateur. Par contre, les espaces seront bien visibles dans votre feuille de code. Les navigateurs ont un mode d'interprétation particulier.
Un code HTML s'écrit toujours dans un éditeur de code ou de texte brut, bref sans fioritures. Il y a bien une sauvegarde des fichiers de Word au format HTML, mais c'est assez rudimentaire et surtout difficile à retoucher. Pour coder, ne prenez pas de traitement de texte.