Vous avez à publier en ligne 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 code, texte préformaté |
<code> |
inline | Code informatique |
<kbd> |
inline | Entrée au clavier |
<samp> |
inline | Sortie de code |
<var> |
inline | Variable |
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><!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"></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/xhtml1-strict.dtd">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 clavierLa 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 codeCette 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 variablesCette 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.
Source : Les phrases : les éléments EM, STRONG, DFN, CODE, SAMP, KBD, VAR, CITE, ABBR, et ACRONYM, spécification HTML 4.01 du W3C, 1999.
Voir aussi :
- Du code dans vos pages web !, Kévin Dunglas, septembre 2008.
- A la recherche des balises perdues..., par Raphael GOETTER, mai 2004
- Comment représenter du code HTML en HTML ?, Stefan Münz
Imprimer
PDF
Envoyer
Syndiquez tout le site (flux RSS)
Suivez-moi sur Twitter
J'aime pas Facebook
Vos commentaires
1. Le 2 novembre 2008 à 10:17, par Pascale
En réponse à : Mettez du code dans vos pages web
Excellent petit mémo de sémantique à garder sous le coude ! :)
2. Le 2 novembre 2008 à 14:40, par Fairytree
En réponse à : Mettez du code dans vos pages web
Très intéressant, et surtout très instructif.
Merci beaucoup pour cet article ! :)
3. Le 9 novembre 2008 à 16:21, par Olivier G.
En réponse à : Mettez du code dans vos pages web
Oui, c’est très pratique ces balises aliées avec CSS, je les utilise dans mon blog, par exemple pour parler de javascript
4. Le 10 novembre 2008 à 14:58, par Stéphane Deschamps
En réponse à : Mettez du code dans vos pages web
Ça prouve surtout que le HTML a été fait par des scientifiques-informaticiens. :)
Pour ma part, comme je suis une feignasse, j’utilise
codepourcode,kbd,sampetvar...En revanche je suis très impatient de voir implémenter les balises de HTML5, qui, elles, seront un vrai plus sémantique, et à l’usage du plus grand nombre,
aside,header,footeretc.5. Le 12 novembre 2008 à 14:49, par Benoît
En réponse à : Mettez du code dans vos pages web
Bonjour,
Pour aller plus loin, quelles sont vos usages en terme de coloration syntaxique ?
Merci.
6. Le 12 novembre 2008 à 20:40, par BoOz
En réponse à : Mettez du code dans vos pages web
J’adopte
<del>, merci.Un message, un commentaire ?
Suivre les commentaires :
| 