<pre> : l'élément de texte préformaté
=====================================

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.

Exemple interactif
------------------

Il est nécessaire d'échapper les caractères `<`, `>`, `&`, et `"` afin de s'assurer que le code écrit entre les éléments ne soit pas interprété de façon involontaire, l'échappement se fait en utilisant l'entité HTML correspondante.

|  |  |
| --- | --- |
| 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ôle ARIA implicite | Aucun rôle correspondant |
| Rôles ARIA autorisés | Tous les rôles sont autorisés. |
| Interface DOM | `HTMLPreElement` (en-US) |

Attributs
---------

Cet élément inclut uniquement les attributs universels.

`cols` 
Non-standard

Obsolète

Cet attribut contient le nombre *préféré* de caractères qu'une ligne devrait avoir. Cet attribut était un synonyme non-standard de l'attribut `width` (voir ci-après). Afin d'obtenir cet effet, il est plutôt conseillé d'utiliser la propriété CSS `width`.

`width` 
Obsolète

Non-standard

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 la propriété CSS `width`.

`wrap` 
Non-standard

Obsolète

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`.

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 navigant à 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 et lu dans le désordre.

Pour légender un tel diagramme, on pourra utiliser une combinaison d'éléments `<figure>` et `<figcaption>` complétée par les attributs ARIA `role` et `aria-label` (en-US) sur l'élément `<pre>` afin que le dessin en ASCII préformaté puisse être énoncé comme une image avec un texte alternatif, `<figcaption>` servant alors de légende à l'image.

### Exemple


```html
<figure>
  <pre role="img" aria-label="Vache en ASCII">
      ___________________________
  &lt; Je suis la meuhieure. &gt;
      ---------------------------
          \   ^__^
           \  (oo)\_______
              (__)\       )\/\
                  ||----w |
                  ||     ||
  </pre>
  <figcaption id="cow-caption">
    Une vache qui dit "Je suis la meuhieure.". La vache est illustrée à l'aide
    de caractères préformatés.
  </figcaption>
</figure>
```


* Comprendre les règles WCAG 1.1
* Techniques H86 : fournir des alternatives textuelles pour les dessins ASCII, les émoticônes, et le *leetspeak* | Techniques W3C pour WCAG 2.0
Exemples
--------

### Exemple simple

#### HTML


```html
<p>On peut utiliser CSS pour changer la couleur d'une police.</p>
<pre>
body {
  color: red;
}
</pre>
```


#### Résultat

### Échapper des caractères réservés

#### HTML


```html
<pre>
let i = 5;

if (i &lt; 10 &amp;&amp; i &gt; 0) {
  return &quot;Nombre à un seul chiffre&quot;;
}
</pre>
```


#### Résultat

Spécifications
--------------

| Specification |
| --- |
| HTML Standard # the-pre-element |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* Les propriétés CSS
    + `white-space`
    + `word-break`
* Les entités HTML
* L'élément HTML `<code>`