English

<pre>

Conserver l'indentation et les espaces : code, poésie, ASCII art

— 1 min de lecture

  • HTML
  • accessibilité
  • sémantique

<pre> — Le texte préformaté

La balise <pre> affiche le texte tel qu'il est écrit dans le source : espaces, tabulations et sauts de ligne sont préservés. Combine avec <code> pour les blocs de code.

Quand l'utiliser

Tu veux afficher un bloc de code, un extrait de terminal, un poème ou tout contenu dont la mise en forme spatiale a du sens. Utilise <pre><code> pour du code, <pre><samp> pour une sortie terminal.

Ce que tu gagnes

Accessibilité : contrairement aux balises inline (<code>, <kbd>, <samp>), <pre> est annoncé par les lecteurs d'écran. NVDA dit "texte préformaté" à l'entrée du bloc. La structure spatiale (indentation, retours à la ligne) est préservée.

Exemple de code

<pre><code>const total = items
  .filter(item =&gt; item.active)
  .reduce((sum, item) =&gt; sum + item.price, 0);</code></pre>

Pour aller plus loin