Balise HTML `<pre>`

La balise <pre> permet d'insérer du texte préformaté dans un document HTML. Les espaces et les sauts de ligne dans le texte sont conservés. La balise <pre> est généralement utilisée pour afficher du code, ou un texte (par exemple, un poème), où l'auteur définit lui-même l'emplacement des lignes les unes par rapport aux autres. Le texte dans un élément <pre> est affiché dans une police à chasse fixe.

Le contenu de la balise est affiché dans le navigateur dans une police monospace.

Les éléments en ligne sont généralement placés à l'intérieur de la balise <pre>. Bien que les éléments de niveau bloc soient autorisés en HTML5, ils peuvent introduire des espaces blancs ou une indentation inattendus, de sorte que les éléments en ligne sont généralement préférés.

TIP

La balise <pre> peut être utilisée pour afficher du texte avec une mise en forme inhabituelle, ou un type de code informatique.

Syntaxe

La balise <pre> s'utilise par paire. Le contenu est écrit entre les balises d'ouverture (<pre>) et de fermeture (</pre>).

Exemple de la balise HTML `<pre>` :

Exemple de la balise HTML <pre> | W3Docs

html

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
  </head>
  <body>
    <pre>Spaces
               and line breaks
               within this element 
        are shown as typed.           
    </pre>
  </body>
</html>

Try it Yourself »

Résultat

pre tag example

TIP

Pour insérer du code dans un document HTML, utilisez la balise <code>, imbriquée dans l'élément <pre>. Dans ce cas, les robots d'indexation et les lecteurs d'écran comprendront immédiatement qu'il s'agit de code informatique.

Exemple de la balise HTML `<pre>` avec l'élément `<code>` :

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <pre>
      <code>
        body {
          color:orange;
        }
      </code>
    </pre>
  </body>
</html>

Try it Yourself »

Attributs

Attribut	Valeur	Description
width	number	Obsolète. Utilisez plutôt CSS `max-width` ou `overflow`.

La balise <pre> prend en charge les Attributs globaux et les Attributs d'événement.

Comment styliser une balise HTML <pre>

css

pre {
  background-color: #f4f4f4;
  padding: 10px;
  overflow-x: auto;
}

Pratique

Quelles sont les caractéristiques de la balise 'pre' en HTML ?

La balise 'pre' est utilisée pour définir du texte préformaté.La balise 'pre' ne conserve ni les espaces ni les sauts de ligne.Le texte dans une balise 'pre' est affiché dans une police à chasse fixe.La balise 'pre' doit être utilisée lorsqu'il est nécessaire de conserver une mise en forme exacte du texte.La balise 'pre' supprime les espaces supplémentaires et les nouvelles lignes.

Balise HTML <pre> ​

Syntaxe ​

Exemple de la balise HTML <pre> : ​

Résultat ​

Exemple de la balise HTML <pre> avec l'élément <code> : ​

Attributs ​