A la recherche des balises perdues...

Actualité par (Intégrateur du Dimanche, Strasbourg)
Créé le , mis à jour le (20374 lectures)

Le XHTML a conservé un bon nombre de balises "exotiques" dont vous ne soupçonnez peut-être même pas l'existence : VAR, TT, SAMP, BDO, KBD, ADDRESS et autres CODE, en passant par INS et DEL.

Pour ma part, je vous avoue que hier encore je n'en connaissais pas la moitié !

Voyons un peu ce qui se cache derrière ces balises perdues...

Sources d'informations

Avant de commencer, voici les divers sources qui m'ont permis de trouver mes informations :

Les différentes définitions et citations proviennent de ces quatre sources d'information.

Les balises INS et DEL (en-ligne)

Les balises INS et DEL sont les balises en-ligne qui sont sans-doute les plus utilisées de toutes celles qui vont être décrites ici.

La balise INS sert à marquer les sections d'un document qui ont été insérées. La balise DEL sert à marquer les sections d'un document qui ont été supprimées.

selon Laurent Denis :

DEL signale au lecteur qu'une portion de texte est dépréciée et n'a été conservée que pour mémoire ou pour information. Elle permet d'effectuer des corrections tout en laissant la trace du texte original : disons que c'est une question d'éthique, une façon d'assumer ses erreurs. DEL et INS sont très utiles lors d'un travail d'écriture collective ou de relecture d'un document : ils permettent de conserver le texte original tout au long du processus, et surtout d'automatiser le traitement final : une simple transformation xslt suffit en effet pour effacer le texte balisé avec DEL et de remplacer par le texte INS...
Exemple : Jean-Claude Vandamme est né en <del>1920</del><ins>1960</ins>. Il est un <del>sportif</del> <del>écrivain</del> <ins>movie star</ins> célèbre.

Notons qu'il existe deux attributs optionnels aux balises INS et DEL : "datetime" (pour retenir la date de la modification) et "cite" (pour mentionner une adresse URI qui peut avoir justifié la modification).

La balise ADRESS ADDRESS (bloc)

Cette balise sert à signaler une adresse (attention à ne pas l'écrire à la française !). Pour être précis, ADDRESS ne sert qu'à informer sur les coordonnées du concepteur de la page web, et uniquement à cet usage. Elle n'est pas appropriée pour indiquer une adresse quelconque, mais uniquement celle du webmaster.

The ADDRESS element provides contact information for a document or part of a document. Information provided by ADDRESS may include the names of the document's maintainers, links to the maintainers' Web pages, e-mail addresses for feedback, postal addresses, phone numbers, and so on. The ADDRESS element is not appropriate for all postal and e-mail addresses; it should be reserved for providing such information about the contact people for the document.

Cette balise est à préférer sémantiquement par rapport à d'autres balises générales (div, p,...) pour ce genre d'usages, par exemple pour noter les contacts mail du webmaster en bas de page.

<address>webmaster chez alsacreations point com</address>

Avis personnel : je trouve curieux que le W3C ait voulu donner une importance sémantique particulière à l'adresse du webmaster. Je veux dire : pourquoi faire une balise spécialement pour ça et pas pour plein d'autres choses ? (pourquoi pas une balise PHONE pour le téléphone tant qu'on y est ?)... mais puisqu'elle existe, autant utiliser cette balise !

La balise BDO (en-ligne)

Cette balise indique le sens d'affichage du texte, de gauche à droite, ou de droite à gauche.

Elle permet d’afficher du texte dont le sens de lecture est de droite à gauche. Pour faciliter la lecture, on peut y ajouter une balise title qui indiquera le texte dans le bon sens.

Exemple : <bdo dir="rtl" title="alsacreations.com">alsacreations.com</bdo>

L'élément BDO devrait s'utiliser dans les cas de figure où un contrôle absolu sur l'ordre des séquences est nécessaire (par exemple, des numéros de pièces de rechange dans plusieurs langues). L'attribut dir est obligatoire pour cet élément.

Avis personnel : quelle balise curieuse. Sachant que l'attribut "dir" peut être appliqué sur n'importe quelle autre balise également, je ne vois pas trop l'intérêt de BDO... à part peut-être pour les textes arabes qui se lisent de droite à gauche.

EDIT : quelques précisions suite aux commentaires laissés sur le billet. Comme le précise simOn , l'attribut dir indique le sens de lecture, et BDO affiche son contenu dans la direction indiquée à l'attribut dir.

Exemple : <bdo dir="rtl">alsacreations.com</bdo> produira un affichage différent de <div dir="rtl">alsacreations.com</div>

La balise VAR (Variable) (en-ligne)

Cette balise sert à afficher le nom d'une variable d'un programme. Cet élément est réservé pour désigner une variable dans un programme; la variable est affichée en italique.

Exemple : la variable <var>toto</var>

La balise DFN (Definition) (en-ligne)

Cette balise sert à marquer le texte sous forme de définition.

DFN est un élément non supporté par la plupart des navigateurs d'après mes sources. Le marquage d'une définition doit être rendu en italique en principe. Cet élément permet de mettre en évidence une portion de texte, rendue dans la fonte courante.

Exemple : <dfn>Définition du Blog :</dfn> De façon très synthétique, un "blog" (ou "weblog") est un site Web personnel composé essentiellement d'actualités, publiées au fil de l'eau et apparaissant selon un ordre ante-chronologique (les plus récentes en haut de page), le plus souvent enrichies de liens externes.

Avis personnel : si j'ai bien compris le principe, DFN est l'équivalent en-ligne des Listes de Définition (DL, DT, DD), utilisée pour des définitions courtes qui restent dans le texte.

La balise TT (teletype text) (en-ligne)

Cette balise sert insérer un texte télétype (avec une police à pas fixe). Les chaînes de caractère insérées entre les marqueurs de TT doivent être rendues dans une police fixe avec l'apparence des caractères d'une machine à écrire ou d'un telex

TT rend un texte dans une police identique à PRE. Aucun espace n'est ménagé avant et après le texte. En outre, le texte est formaté aux dimensions de l'écran.

A l'inverse, PRE est un élément de formatage de blocs de texte. Il ajoute une ligne vierge avant et après le bloc et respecte les marges et indentations . Par ailleurs,le texte affiché est insécable et peut facilement déborder des limites de l'écran.

Utilisez PRE chaque fois que vous désirez un rendu fidèle à l'original (respect des retour à la ligne, des marges, etc). Préférez TT dans les autres cas, en particulier dans les tables et les frames.

The TT element suggests that text be rendered as teletype or monospaced text. In most cases, use of a phrase element such as CODE, SAMP, or KBD is more appropriate since these elements express the meaning of the text more clearly.

Avis personnel : TT est fait pour afficher du texte en taille fixe (monotype), de même que l'est la balise PRE pour les blocs. Comme nous allons le voir, TT est une balise générique qui peut être déclinée en CODE, SAMP ou KBD selon les usages... Pour info, tous les exemples de cette page sont structurés en TT.

La balise CODE (en-ligne)

Cette balise sert à insérer les instructions d'un programme. Cet élément permet de mettre en évidence une portion de code de programme; le texte est rendu dans une fonte fixe (texte monotype). Le texte marqué par cette balise s'affiche, en principe, en police de petite taille (pas avec IE5, en tout cas)

The CODE element denotes computer code. Visual browsers typically render CODE as monospaced text, but authors can suggest a rendering using style sheets. Since CODE is a structural element, it carries meaning, making it preferable to font style elements such as TT when marking up computer code.
Since spacing is often important when presenting computer code, the PRE element can be useful as a container for CODE elements. When used within other containers, a CODE element has multiple spaces collapsed.

Avis personnel : Comme TT, CODE est fait pour afficher du texte en taille fixe. Il semble spécifique aux listings de données et de programmation.

La balise SAMP (sample, échantillon) (en-ligne)

Cette balise sert à afficher des extraits de programmes ou de script. Les caractères placés entre les marqueurs de l'élément SAMP sont rendus dans une police à pas fixe.

Avis personnel : Par rapport à CODE j'avoue que je ne suis pas sûr d'avoir vraiment saisi la subtilité. A vue d'oeil et selon les définitions, je dirais que CODE est fait pour afficher tout un code, alors que SAMP est fait pour afficher une partie d'un code... bref, que de subtilités.

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

La balise KBD (keyboard, clavier) (en-ligne)

Rend un texte supposé tapé au clavier dans une police à pas fixe. Cet élément est utile dans la rédaction d'un manuel, lorsqu'on veut indiquer qu'il faut entrer des données au clavier.

Avis personnel : Le dernier de la liste, dans le moule de TT, CODE, SAMP et PRE. Pas grand-chose à dire de plus, à part s'interroger sur l'interêt de la balise et sur les motivations du W3C en la concevant...

EDIT : quelques précisions suite aux commentaires laissés sur le billet. Comme le suggère simOn , la balise KBD est tout à fait appropriée pour indiquer les accesskeys dans une charte d'accessibilité.

Le site de Firefox utilise d'ailleurs cette balise KBD largement (merci à Katsoura pour le lien)

Conclusion

J'espère que certaines balises vous seront plus utiles qu'à moi ;)

J'attends bien entendu des retours utilisateurs si vous connaissez des usages utiles ou insolites de certaines de ces balises pittoresques.

Pour finir un petit jeu : vous avez à mettre en ligne un code de programmation de quelques lignes contenant des variables. Ce code est un exemple sensé représenter ce que l'utilisateur aura à taper sur son clavier... quelle(s) balise(s) allez-vous utiliser entre CODE, SAMP, TT, KBD, VAR et PRE ???