<pre>
Un texte préformaté : il conserve les espaces, les tabulations et les retours à la ligne exactement comme dans le code.
- Affichage
- block
- Balise fermante
- Obligatoire
- Contenu autorisé
- Contenu phrasant
Exemple
#<pre><code>function greet(name) {
return 'Bonjour, ' + name + '!';
}
console.log(greet('Léa'));</code></pre>Définition et utilisation
#Normalement, le navigateur fusionne plusieurs espaces en un seul et ignore les retours à la ligne dans le code HTML. L’élément <pre> désactive ce comportement : le texte s’affiche exactement comme il apparaît dans le code, avec chaque espace, chaque tabulation et chaque nouvelle ligne. Par défaut, il utilise une police à largeur fixe.
Il contient le plus souvent des extraits de code, des résultats de commandes de terminal, des arborescences de répertoires ou des dessins en caractères ASCII. Placez le code d’un programme dans la paire <pre><code>…</code></pre> : <pre> s’occupe du formatage, et <code> indique qu’il s’agit de code.
Les caractères < et & y gardent une signification spéciale, donc écrivez-les comme < et &. Les lignes longues ne reviennent pas à la ligne toutes seules et peuvent dépasser du conteneur, c’est pourquoi on ajoute généralement overflow-x: auto. Le parseur ignore un unique retour à la ligne juste après la balise ouvrante, donc vous pouvez sans crainte commencer le contenu sur une nouvelle ligne.
Syntaxe
#<pre>
texte qui conservera
tous les espaces
</pre>Attributs
#Cet élément n’a pas d’attributs propres. Il accepte les attributs globaux, comme class, id ou hidden.
Plus d’exemples
#<pre>
mon-site/
├── index.html
├── css/
│ └── style.css
└── js/
└── app.js
</pre><pre><code><a href="/formations">Formations & parcours</a></code></pre>Dans le code source, ce sont des entités, et l’aperçu affiche de simples caractères <, > et &.
CSS par défaut
#La plupart des navigateurs affichent cet élément avec ces styles par défaut :
pre {
display: block;
font-family: monospace;
white-space: pre;
margin-block: 1em;
}Compatibilité des navigateurs
#Largement disponible
Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.
- Chrome
- Edge
- Firefox
- Safari
Bonnes pratiques
#- Écrivez un bloc de code sous la forme
<pre><code>, et un court fragment dans une phrase sous la forme d’un simple<code>. - Ajoutez
overflow-x: autopour que les lignes longues défilent horizontalement, au lieu d’élargir la page sur téléphone. - Placez un dessin en caractères ASCII dans une
<figure>avec une description dans<figcaption>, car un lecteur d’écran le lira comme une suite de symboles au hasard.
Entrées associées
#- <code>Un fragment de code informatique : le nom d’une variable, d’une fonction, d’une balise ou d’un fichier, ainsi qu’un court extrait.
- <samp>Un résultat type d’un programme : un message, une réponse de la console ou le texte d’une erreur.
- <kbd>Une saisie effectuée par l’utilisateur : des touches, des raccourcis clavier et des commandes à saisir.
- <p>Un paragraphe de texte.
- <br>Un retour à la ligne à l’endroit où il est inséré, sans commencer un nouveau paragraphe.
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.