Mettez du code dans vos pages web

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 !

Vous apprécierez aussi <ins>, <del>, <sub> et <sup>, mais évitez les balises en voie de disparition, telles que <s>, <strike>, <u> et <tt>.

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 (texte monotype).

Exemple :

<pre>&lt;!DOCTYPE html
PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot;
&quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot;&gt;</pre>

Ce qui s’affiche ici de la sorte :

< !DOCTYPE html 
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xht... ;

La balise <pre> ne peut être parent que d’éléments en ligne, à 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 :
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, par exemple, tout à fait appropriée pour signaler les raccourcis clavier tels que les accesskeys dans une charte d’accessibilité.

Exemple :
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.

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