À quoi sert la balise <pre> ?

4 septembre,
par Romy Têtue

Mots-clefs associés à cet article :

Mais à quoi sert la balise <pre> ? Au texte pré-formaté dit la spec HTML du W3C. Son nom, <pre>, signifie littéralement « PRÉ-formaté ». Et ça fait des années que je me demande ce que ça signifie… Cette balise sert tellement peu souvent que je n’avais jamais pris la peine de creuser. Mais qu’est-ce donc que le texte pré-formaté ?


Exemple avec la balise <pre> :

###### #    #   ##   #    # #####  #      ######
#       #  #   #  #  ##  ## #    # #      #      
#####    ##   #    # # ## # #    # #      ##### 
#        ##   ###### #    # #####  #      #      
#       #  #  #    # #    # #      #      #      
###### #    # #    # #    # #      ###### ######

Sans la balise <pre>, c’est incompréhensible :

###### # # ## # # ##### # ######
# # # # # ## ## # # # #
##### ## # # # ## # # # # #####
# ## ###### # # ##### # #
# # # # # # # # # #
###### # # # # # # # ###### ######

La balise <pre> a pour particularité de restituer le texte dans le code source de la même manière qu’il a été tapé : les espaces multiples, les tabulations et les sauts de ligne sont préservés, alors que partout ailleurs dans la page web, les espaces sont réduites à une seule, le retour à la ligne s’obtient avec <br> et le saut de ligne n’existe pas… La balise <pre> permet donc d’échapper exceptionnellement à ce formatage, pour respecter celui du texte originel, qui est donc logiquement dit « pré-formaté ».

Exemples de textes pré-formatés

Cette balise se prête idéalement à l’affichage du code informatique et ses indentations. Mais contrairement à ce à quoi on la réduit trop souvent, la balise <pre> ne sert pas qu’à afficher du code… mais aussi de l’ASCII Art ou de la poésie. Code is poetry, n’est-ce pas ;)

ASCII Art

Il n’y a pas mieux pour afficher l’ASCII Art, ces images réalisées uniquement à l’aide des lettres et caractères spéciaux contenus dans le code ASCII :


Avec la balise <pre> :

 ____ ____ ____      
||p |||r |||e ||     
||__|||__|||__||     
|/__\|/__\|/__\|

Sans la balise <pre>, c’est tout mâchouillé :

____ ____ ____ ||p |||r |||e || ||__|||__|||__|| |/__\|/__\|/__\|

L’art est dans le <pre> !

Poésie

C’est parfois utile pour la poésie moderne, en particulier pour les calligrammes, ces poèmes dont la disposition graphique des lettres et des mots forme un dessin :

Poème d’Apollinaire avec la balise <pre> :

         S
         A
        LUT
         M
        O N
       D   E
       DO NT
     JE   SUIS
      LA  LAN
      GUE   É
      LO QUEN
     TE QUE SA
      BOU CHE
      Ô  PARIS
    TIRE ET TIRERA
   TOU        JOURS
  AUX            AL
LEM               ANDS

Sans la balise <pre>, le formatage est perdu et la poésie s’envole :

S A LUT M O N D E DO NT JE SUIS LA LAN GUE É LO QUEN TE QUE SA BOU CHE Ô PARIS TIRE ET TIRERA TOU JOURS AUX AL LEM ANDS

Texte brut

Elle est indispensable pour restituer le texte brut des fichiers ou des courriels, avec leurs paragraphes indiqués par des lignes vierges, leurs listes par des lignes préfixées d’un tiret, etc.


Voici un exemple de tableau pré-formaté, tel qu’il nous arrive d’en écrire rapidement dans un courriel, en ajoutant simplement des espaces :

haricots secs       1,5 kg
courgettes          2,5 kg
macaronis           1,5 kg
pulpe de tomates    1,5 kg
ail                 750 g
basilic             500 g

Ou tel qu’on en voit parfois dans les fichiers informatiques :

 ______________________________________________________________
|                    |                     |                   |
|       pre          |         p           |        br         |
|____________________|_____________________|___________________|
|                    |                     |                   |
| Texte pré-formaté  |      Paragraphe     | Retour à la ligne |
|____________________|_____________________|___________________|

Évidemment, si vous avez le choix, un tableau balisé de <table>, <td>, etc. sera plus approprié sur le Web.

Balisage léger

C’est la balise idéale pour les textes rédigés en syntaxes légères, de type Wiki ou Markdown, qui ont la particularité de proposer un balisage léger du texte brut, qui préserve ainsi sa bonne lisibilité.


Exemple de texte en Markdown avec la balise <pre> :

	Le titre du paragraphe
	======================

	Voici un mot en **gras** puis une liste :

	* c'est simple ;
	* c'est efficace.

Sans la balise <pre> :

Le titre du paragraphe ====================== Voici un mot en **gras** puis une liste : * c'est simple ; * c'est efficace.

Arborescence

Ou encore pour une arborescence de fichiers, exprimée par des tabulations :


Exemple d’arborescence avec la balise <pre> :

website/
	index.html
	img/
		logo.png
	css/
		style.css
		img/
			background.png

Sans la balise <pre>, l’arborescence n’est plus perceptible :

website/
index.html
img/
logo.png
css/
style.css
img/
background.png

Si vous avez le choix, optez plutôt pour la liste, avec ul et li, qui correspond mieux, sémantiquement, à ce qu’est une arborescence :

  • website/
    • index.html
    • img/
      • logo.png
    • css/
      • style.css
      • img/
        • background.png

Code informatique

Cela permet aussi d’afficher du code informatique bien indenté et bien aligné, bref tel que saisi. Dans ce cas, il faut ajouter <code>, évidemment. La balise <pre> respecte le pré-formatage, mais sans présumer de la nature du texte qu’elle contient, tandis que la balise <code> désigne explicitement un extrait de code. Les deux sont donc nécessaires pour afficher un bloc de code.


Extrait de code affiché avec les balises <pre> et <code> :

<?php
	// ceci est du langage php
	echo "bonjour";
?>

Remarque : il est nécessaire de remplacer les caractères « < » de l’extrait de code par l’entité HTML « &lt; », afin que le code ne soit pas interprété.

Et c’est logique : un extrait de code est bien un texte pré-formaté, tandis que l’inverse n’est pas vrai, comme l’on montré les exemples précédents : un texte pré-formaté n’est pas toujours du code.

Comment styler <pre> ?

Son style par défaut lui va très bien :

pre {
  display: block;
  margin-top: 1em;
  margin-bottom: 1em;
  font-family: monospace;
  white-space: pre;
}

Police à chasse fixe (monospace)

Les polices à « chasse fixe » (dites monospace en anglais), de type machine à écrire, ont la particularité de présenter des caractères occupant chacun la même largeur : indispensable pour garantir un rendu correct du texte pré-formaté ! C’est pourquoi la propriété font-family de <pre> possède par défaut la famille générique monospace.

Courier, Monaco ou Consolas ? Pour en choisir une autre, voir ce billet détaillé : Choisir une police à chasse fixe pour le web. À savoir, si vous préférez laisser par défaut : déclarer doublement font-family: monospace, monospace; corrige une irrégularité d’affichage entre les différents navigateurs.

Retour à la ligne

Par défaut, pas de retour à la ligne forcé (white-space: pre;) et c’est tant mieux, car cela préserve l’affichage du texte formaté sur toute la longueur. Au besoin, en cas de dépassement, ajoutez un scroll horizontal :

pre {
  overflow-x: auto;       /* Ajoute un scroll horizontal en cas de dépassement */
  padding-bottom: 12px;   /* Préserve l'espace suffisant pour la barre de scroll */
}

Si, pour l’affichage du code, vous préférez les retours à la ligne pour éviter les dépassements et le scroll horizontal, ciblez spécifiquement pre code (et non pas seulement pre) :

pre code {
  white-space: pre-wrap;
}

Styles perso

Comme on voit sur cette page, j’ai pris soin de distinguer visuellement l’usage de la balise pre pour le texte pré-formaté seul, dont je me sers parfois, de celui pour le code, plus courant :

Exemple de rendu graphique des balises pre et code

Pour d’autres personnalisations, lire : Le CSS pour la balise pre qui s’inspire de cet article du web designer Chris Coyier : Considerations for styling the < pre > tag (sans oublier le style pour l’impression).

Multilinguisme multidirectionnel

Enfin, n’oubliez pas, sur les sites multilingues multidirectionnels, d’ajouter l’attribut dir="ltr", doublé de style="text-align: left;" en dur, pour éviter que le texte pré-formaté, en allant se ferrer à gauche, ne soit tout mâchouillé :

<pre dir="ltr" style="text-align: left;">
{#TITRE,#URL_ARTICLE,#INTRODUCTION}

Vos commentaires

Répondre à cet article

Qui êtes-vous ?

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici
  • Raccourcis : {{gras}} {italique} -liste [bla->url] <q> <quote> <code>.

Suivre les commentaires : RSS 2.0 | Atom