<pre>

Description

L’élément <pre> préserve les espaces et sauts de ligne du texte source, affichés en police monospace par défaut. Il est principalement utilisé pour envelopper des blocs de code (<code>), de l’art ASCII, ou tout texte où la mise en forme exacte est significative.

Syntaxe

<pre>Texte
  préformaté
    avec espaces.</pre>

Exemples

Bloc de code avec coloration :

<pre><code class="language-css">body {
  display: grid;
  grid-template-columns: 1fr 3fr;
}</code></pre>

Art ASCII :

<pre>
  /\_/\
 ( o.o )
  > ^ <
</pre>

Sortie de terminal :

<pre><samp>$ npm run build
✓ Built in 1.23s
9 files generated.</samp></pre>

Notes

<pre> et accessibilité : le contenu <pre> est lu linéairement par les lecteurs d’écran. Pour du code complexe, ajouter aria-label ou fournir une description alternative.

Débordement horizontal : <pre> peut créer un scroll horizontal si le contenu dépasse la largeur du conteneur. Gérer cela avec overflow-x: auto en CSS.

Pas de <pre> pour l’indentation seule : n’utiliser <pre> que lorsque la mise en forme des espaces est sémantiquement significative. Pour l’indentation visuelle, CSS est plus approprié.