Les balises de code

`pre`

La balise <pre> permet d’afficher du texte pré-formatté tel qu’il a été écrit dans le HTML. Utilisée en combinaison avec <code>, elle permet d’afficher des blocs de code visuellement.

index.html

<pre>
  L          TE
    A       A
      C    V
       R A
       DOU
       LOU
      REUSE
      QUE TU
      PORTES
    ET QUI T'
    ORNE O CI
     VILISÉ
    OTE-  TU VEUX
     LA    BIEN
    SI      RESPI
            RER       - Apollinaire
</pre>

L TE A A C V R A DOU LOU REUSE QUE TU PORTES ET QUI T’ ORNE O CI VILISÉ OTE- TU VEUX LA BIEN SI RESPI RER - Apollinaire

Accessibilité
La balise <pre> est mal supportée par les lecteurs d’écran, car elle est complexe à analyser. Pour aider les personnes malvoyantes à comprendre ce contenu formatté, vous pouvez utiliser la balise <figure> et quelques attributs aria-* comme indiqué dans cet article MDN ↗.

`code`

source ↗

La balise <code> représente une portion de texte qui sera affichée comme un fragment de code. Utilisée seule, elle affichera seulement une ligne de texte, mais utilisée avec <pre>, elle permet d’afficher des blocs entiers de code. La typographie utilisée est par défaut de la famille des monospaces.

index.html

<p>The function <code>selectAll()</code> highlights all the text in the input field so the user can, for example, copy or delete the text.</p>

The function selectAll() highlights all the text in the input field so the user can, for example, copy or delete the text.

`samp`

source ↗

La balise <samp> permet d’afficher une sortie de programme, le résultat de l’éxécution d’une commande par exemple. Elle peut aussi être utile pour afficher des codes d’erreur.

index.html

<samp>Error 500: Internal server error</samp>

Error 500: Internal server error

`kbd`

source ↗

La balise <kbd> permet d’afficher la représentation d’une touche du clavier. Pratique pour montrer des raccourcis clavier.

index.html

<p>Appuyez sur <kbd>Cmd + S</kbd> pour sauvegarder</p>

Appuyez sur Cmd + S pour sauvegarder