Mettez du code dans vos pages web

Informaticiens, balisez correctement votre prose !

1er novembre 2008,
par Romy Têtue

Mots-clefs associés à cet article :

Vous souhaitez publier quelques extraits de code accompagnés d’explications. Quelles balises utiliser pour bien présenter cela ?

Le XHTML a conservé un bon nombre de balises exotiques dont vous ne soupçonnez peut-être même pas l’existence. Malheureusement trop souvent ignorées alors qu’elles ont une forte valeur sémantique, rien moins que cinq balises sont dédiées à l’insertion du code informatique. Elles apportaient des distinctions aux débuts du HTML alors exclusivement conçu pour les informaticiens. Apprenez à les utiliser à bon escient !

balise type rôle
<pre> block Bloc de texte préformaté
<code> inline Code informatique
<kbd> inline Entrée au clavier
<samp> inline Sortie de code
<var> inline Variable

La balise <pre> pour les blocs de code

Cette balise est souvent employée pour afficher du code puisqu’elle en conserve l’indentation. Elle permet d’introduire un texte préformaté, c’est-à-dire qu’elle affiche le texte tel qu’il a été tapé, en respectant les espaces, les tabulations et les retours chariots, généralement avec une police à pas fixe (monospace).

Exemple de <pre> :

<pre>! " # $ % &amp; ' ( ) * + , - . /
0 1 2 3 4 5 6 7 8 9 : ; &lt; = &gt; ?
@ A B C D E F G H I J K L M N O
P Q R S T U V W X Y Z [ \ ] ^ _
` a b c d e f g h i j k l m n o
p q r s t u v w x y z { | } ~</pre>

Ce qui s’affiche ici de la sorte :

! " # $ % & ' ( ) * + , - . /
0 1 2 3 4 5 6 7 8 9 : ; < = > ?
@ A B C D E F G H I J K L M N O
P Q R S T U V W X Y Z [ \ ] ^ _
` a b c d e f g h i j k l m n o
p q r s t u v w x y z { | } ~

La balise <pre> ne peut être parente que d’éléments en ligne, dont ceux qui suivent et à l’exception de <img />, <sub> et <sup>.

La balise <code> pour… le code !

Comme son nom l’indique, cette balise sert à introduire un fragment de code informatique, les instructions d’un programme, au fil du texte, souvent dans une police à pas fixe.

Exemple de <code> :

Utilisons la fonction suivante :
<br /><code>function codeSource(param) { ... } 

.

Ce qui s’affiche ici de la sorte :

Utilisons la fonction suivante :
function codeSource(param) { ... } .

La balise <kbd> pour les saisies au clavier

La balise <kbd> (abréviation de keyboard) sert à signaler un texte que doit saisir l’utilisateur (saisies au clavier ou commandes vocales). Elle est tout à fait appropriée pour signaler les raccourcis clavier.

Exemple de <kbd> :

Les combinaisons de touches de ces raccourcis clavier diffèrent selon les navigateurs :
tapez <kbd>Alt + [accesskey]</kbd> si vous naviguez avec Mozilla ou FireFox pour Windows,
ou <kbd>Ctrl + [accesskey]</kbd> sous Macintosh et sous Linux.</kbd>

Ce qui s’affiche ici de la sorte :

Les combinaisons de touches de ces raccourcis clavier diffèrent selon les navigateurs : tapez Alt + [accesskey] si vous naviguez avec Mozilla ou FireFox pour Windows, ou Ctrl + [accesskey] sous Macintosh et sous Linux.

La balise <samp> pour les sorties de code

Cette balise sert à afficher des extraits, des échantillons de texte produit en sortie par un système informatique, programme ou script. Les balises <kbd> et <samp> sont tout à fait indiquées pour spécifier les échanges d’un dialogue homme machine.

Exemple de <samp> :

<p>Pour afficher la liste des fichiers du répertoire courant, entrez la commande <kbd>dir</kbd>. Si le répertoire est vide, le système vous répondra <samp>No files found</samp>.<p>

Ce qui s’affiche ici de la sorte :

Pour afficher la liste des fichiers du répertoire courant, entrez la commande dir. Si le répertoire est vide, le système vous répondra No files found.

La balise <var> pour les variables

Cette balise sert à mettre en évidence le nom d’une variable ou le paramètre d’un programme.

Exemple de <var> :

La variable <var>$toto</var> est un exemple de variable en PHP.

Ce qui s’affiche ici de la sorte :

La variable $toto est un exemple de variable en PHP.

{#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