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).
<pre> :
<pre>! " # $ % & ' ( ) * + , - . /
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 { | } ~</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.
<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.
<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.
<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.
<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.
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.Répondre à cet article
Suivre les commentaires :
| 