Tag HTML <pre>

Le tag <pre> est utilisé pour inclure du texte pré-formaté dans un document HTML. Dans le texte incorporé dans le tag, tous les espaces et les sauts de ligne sont conservés (comme on le sait, les navigateurs par défaut sont dotés d’un nombre illimité d’espaces consécutifs). Le tag <pre> est utilisée pour afficher le code du programme, ou du texte (par exemple, un poème), où l'auteur lui-même a spécifié l'emplacement des lignes les unes par rapport aux autres.

Le contenu du tag est affiché dans le navigateur en police mono-espacée (une police dans laquelle tous les caractères ont la même largeur).

Dans le tag <pre> vous pouvez imbriquer tous les éléments à l'exception des tags <big>, <img>, <object>, <small>, <sub> et <sup>.

En outre, il n'est pas autorisé d'utiliser des éléments de bloc, car ils créent des retraits supplémentaires, modifiant les distances entre les lignes.

Syntaxe

Le tag <pre> est apparié; son contenu est écrit entre le tag ouvrant (<pre>) et le tag fermant (</pre>)

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
  </head>
  <body>
    <pre>Espaces
               et sauts de ligne
               dans cet élément 
        sont affichés comme tapés.           
    </pre>
  </body>
</html>

Résultat

Si vous devez insérer un bloc de code dans le document HTML, utilisez le tag <code>, intégré à l’élément <pre>. Dans ce cas, les robots de recherche, les programmes lisant à l’écran, réalisent immédiatement qu’ils traitent le code du programme.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
  </head>
  <body>
    <pre>
      <code>
        body {
          color:orange;
        }
      </code>
    </pre>
  </body>
</html>

Résultat

Attributs

Attribut Attribut Description
width number Définit la quantité maximale des symboles dans une ligne.
Non supporté en HTML5.

Le tag <pre> supporte également les Attributs globaux et les Attributs d'événements.

Comment styler le tag HTML <pre> ?

Propriétés communes pour modifier le poids visuel/emphase/taille du texte dans le tag <pre>:

Coloration du texte dans le tag HTML <pre>:

Styles de mise en page du texte pour la tag HTML <pre>:

Autres propriétés utiles pour le tag HTML <pre>:


Support de Navigateurs



Trouvez-vous cela utile?

Articles Associées