L'élément HTML <pre> représente du texte préformaté, généralement écrit avec une police à chasse fixe. Le texte est affiché tel quel, les espaces utilisés dans le document HTML seront retranscrits.

Note : Il est nécessaire d'échapper les caractères '<' en '&lt;' afin de s'assurer que le code écrit entre les éléments ne soit pas interprété de façon involontaire.

Catégories de contenu Contenu de flux, contenu tangible.
Contenu autorisé Contenu phrasé.
Omission de balises Aucune, la balise d'ouverture et la balise de fermeture sont obligatoires
Parents autorisés Tout élément qui accepte du contenu de flux.
Rôles ARIA autorisés Tous les rôles sont autorisés.
Interface DOM HTMLPreElement

Attributs

Cet élément inclut uniquement les attributs universels.

cols
Cet attribut contient le nombre préféré de caractères qu'une ligne devrait avoir. Cet attribut était un synonyme non-standard de width. Afin d'obtenir cet effet, il est plutôt conseillé d'utiliser la propriété width.
width
Cet attribut contient le nombre préféré de caractères qu'une ligne devrait avoir. Bien qu'implémenté, cet attribut n'a aucun effet visuel. Pour obtenir cet effet, il est plutôt conseillé d'utiliser width.
wrap
Cet attribut est une indication sur la façon de gérer le dépassement d'une ligne. Les navigateurs modernes ignorent cette indication et cet attribut n'engendre aucun effet visuel. Pour obtenir cet effet, il faut utiliser la propriété CSS white-space.

Exemples

HTML

<pre>
body {
  color:red;
}
</pre> 

Résultat

Accessibilité

Il est important de fournir une description alternative pour toute image ou diagramme créé avec du texte préformaté. Cette description alternative devrait décrire clairement, et de façon concise, le contenu du diagramme.

Les personnes souffrant de troubles de la vision et/ou naviguant à l'aide d'outils d'assistance comme des lecteurs d'écran peuvent ne pas comprendre le diagramme si celui-ci est construit avec des lettres et symboles.

Pour légender un tel diagramme, on pourra utiliser une combinaison d'éléments <figure> et <figcaption> relié via un attribut id et les attributs ARIA role et aria-labelledby afin que le texte soit annoncé comme une image et que l'élément figcaption fournisse la description alternative.

Exemple

<figure role="img" aria-labelledby="legende-vache">
  <pre>
  _____________
< Oh la vache !>
  -------------
         \   ^__^ 
          \  (oo)\_______
             (__)\       )\/\
                 ||----w |
                 ||     ||
  </pre>
  <figcaption id="legende-vache">
    Une vache qui dit « Oh la vache ! ». La vache est illustrée avec du texte à chasse fixe. 
  </figcaption>
</figure>

Spécifications

Spécification État Commentaires
HTML Living Standard
La définition de '<pre>' dans cette spécification.
Standard évolutif Aucune modification majure depuis HTML5
HTML5
La définition de '<pre>' dans cette spécification.
Recommendation Aucune modification majeure depuis HTML 4.01 Specification.
HTML 4.01 Specification
La définition de '<pre>' dans cette spécification.
Recommendation Dépréciation de l'attribut  cols.

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari pour iOSSamsung Internet
Support simpleChrome Support complet OuiEdge Support complet OuiFirefox Support complet 1IE Support complet OuiOpera Support complet OuiSafari Support complet OuiWebView Android Support complet OuiChrome Android Support complet OuiEdge Mobile Support complet OuiFirefox Android Support complet 4Opera Android Support complet OuiSafari iOS Support complet OuiSamsung Internet Android Support complet Oui
cols
ObsolèteNon-standard
Chrome Aucun support NonEdge Aucun support NonFirefox Aucun support 1 — 29IE Aucun support NonOpera Aucun support NonSafari Aucun support NonWebView Android Aucun support NonChrome Android Aucun support NonEdge Mobile Aucun support NonFirefox Android Aucun support 4 — 29Opera Android Aucun support NonSafari iOS Aucun support NonSamsung Internet Android Aucun support Non
width
ObsolèteNon-standard
Chrome Support complet Oui
Notes
Support complet Oui
Notes
Notes Specifying the width attribute has no layout effect.
Edge Support complet Oui
Notes
Support complet Oui
Notes
Notes Specifying the width attribute has no layout effect.
Firefox Support complet 1
Notes
Support complet 1
Notes
Notes Since Firefox 29, specifying the width attribute has no layout effect.
IE Support complet Oui
Notes
Support complet Oui
Notes
Notes Specifying the width attribute has no layout effect.
Opera Support complet Oui
Notes
Support complet Oui
Notes
Notes Specifying the width attribute has no layout effect.
Safari Support complet Oui
Notes
Support complet Oui
Notes
Notes Specifying the width attribute has no layout effect.
WebView Android Support complet Oui
Notes
Support complet Oui
Notes
Notes Specifying the width attribute has no layout effect.
Chrome Android Support complet Oui
Notes
Support complet Oui
Notes
Notes Specifying the width attribute has no layout effect.
Edge Mobile Support complet Oui
Notes
Support complet Oui
Notes
Notes Specifying the width attribute has no layout effect.
Firefox Android Support complet 4
Notes
Support complet 4
Notes
Notes Since Firefox 29, specifying the width attribute has no layout effect.
Opera Android Support complet Oui
Notes
Support complet Oui
Notes
Notes Specifying the width attribute has no layout effect.
Safari iOS Support complet Oui
Notes
Support complet Oui
Notes
Notes Specifying the width attribute has no layout effect.
Samsung Internet Android Support complet Oui
wrap
ObsolèteNon-standard
Chrome ? Edge Aucun support NonFirefox Support complet 1IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile Aucun support NonFirefox Android Support complet 4Opera Android ? Safari iOS ? Samsung Internet Android ?

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Compatibilité inconnue  
Compatibilité inconnue
Fonctionnalité non-standard. Celle-ci peut être incorrectement supportée par les autres navigateurs.
Fonctionnalité non-standard. Celle-ci peut être incorrectement supportée par les autres navigateurs.
Obsolète. Les nouveaux sites web ne doivent pas utiliser cette fonctionnalité.
Obsolète. Les nouveaux sites web ne doivent pas utiliser cette fonctionnalité.
Voir les notes d'implémentation.
Voir les notes d'implémentation.

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : SphinxKnight, marie-ototoi, tregagnon
Dernière mise à jour par : SphinxKnight,