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 '<
' afin de s'assurer que le code écrit entre les éléments ne soit pas interprété de façon involontaire.
Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner https://github.com/mdn/interactive-examples et à envoyer une pull request !
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>
- Comprendre les règles WCAG 1.1
- H86: Providing text alternatives for ASCII art, emoticons, and leetspeak | W3C Techniques for WCAG 2.0 (en anglais)
Résumé technique
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 |
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
Ordinateur | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
pre | Chrome Support complet Oui | Edge Support complet Oui | Firefox Support complet 1 | IE Support complet Oui | Opera Support complet Oui | Safari Support complet Oui | WebView Android Support complet Oui | Chrome Android Support complet Oui | Firefox Android Support complet 4 | Opera Android Support complet Oui | Safari iOS Support complet Oui | Samsung Internet Android Support complet Oui |
cols | Chrome Aucun support Non | Edge Aucun support Non | Firefox Aucun support 1 — 29 | IE Aucun support Non | Opera Aucun support Non | Safari Aucun support Non | WebView Android Aucun support Non | Chrome Android Aucun support Non | Firefox Android Aucun support 4 — 29 | Opera Android Aucun support Non | Safari iOS Aucun support Non | Samsung Internet Android Aucun support Non |
width | Chrome
Support complet
Oui
| Edge
Support complet
Oui
| Firefox
Support complet
1
| IE
Support complet
Oui
| Opera
Support complet
Oui
| Safari
Support complet
Oui
| WebView Android
Support complet
Oui
| Chrome Android
Support complet
Oui
| Firefox Android
Support complet
4
| Opera Android
Support complet
Oui
| Safari iOS
Support complet
Oui
| Samsung Internet Android
Support complet
Oui
|
wrap | Chrome ? | Edge Aucun support Non | Firefox Support complet 1 | IE ? | Opera ? | Safari ? | WebView Android ? | Chrome Android ? | Firefox Android Support complet 4 | Opera 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
- Les propriétés CSS
white-space
etword-break