12 mai 2007 # #

Les oubliés du html

Lu un excellent article sur sitepoint à propos des 5 tags html les moins utilisés :

<dfn> <cite> <var> <samp> <kbd>

Un peu de sémantique

En bon ouvrier de la ligne html que je suis, lorsque je réalise l’intégration d’une page web, j’identifie quels seront les titre sur ma page. Pour ceux-là, j’utiliserai des tags <h1> <h2> <h3>...

J’identifie également les éléments qu’il faudra mettre en avant. Pour ceux-ci, j’utiliserai le tag <em>

Lorsqu’il y a des commentaires ou des citations, sur une page, je rajoute des trucs comme ça : <cite> <blockquote> <q>

Chaque tag html a une signification logique. Si on est un peu logique et anglophone, on peut facilement former un document html qui a du sens pour les êtres humains et pour les machines [1].

html sémantique, quel intérêt ?

A quoi ça sert de se casser la tête comme ça à part se la péter sur son blog ?

Utiliser le potentiel sémantique du html vous permet de rendre vos documents plus accessibles. Les terminaux lecteurs d’écran – type Jaws ou autre – seront mieux à même d’interpréter le sens de votre document.

Cela vous permet également d’être mieux référencé par les moteurs de recherche. Ceux-ci ainsi seront capables d’interpréter plus facilement le contenu de votre page et donc de servir des résultats plus pertinents.

Liste des tags et signification sémantique

Pour la route je vous livre un rapide tableau des éléments html et de leur signification en français. Comme ça, plus aucune excuse pour ne pas utiliser tous les tags à votre disposition. Pour info, j’ai exclu les éléments non sémantiques type
<hr/> <br/> <img/> Non pas que je ne les aime pas mais il est ici question de rajouter du sens à un document et ces éléments là ne rentrent pas dans cette catégorie.

éléments en ligne
tag nom complet traduction
abbr abreviation abréviation
acronym acronym acronyme
address address adresse
cite cite citation
code code code
dfn definition définition
em emphasize insister, important, rajouter de l’emphase
kbd keyboard clavier
pre preformated text texte préformaté
samp sample exemple
small small petit
span span rassembler merci br1o
strike strike barré [2]
strong strong fort
tt teletype teletype
u underline souligné [3]
var variable variable
éléments de type bloc
tag nom complet traduction
h1, h2, h3… header Titre de niveau n
p paragraphe paragraphe
blockquote quotation block longue citation
div division division
éléments de liste
tag nom complet traduction
dl definition list liste de définition
dt definition term terme défini
dd definition définition
ol ordered list liste ordonnée
ul unordered list liste non ordonnée
li list item élément de liste
éléments de fomulaire
tag nom complet traduction
form form fomulaire
fieldset fieldset ensemble de champ
legend legend légende
label label étiquette
input input zone de saisie
textarea textarea champs de type texte
button button bouton
éléments de tableaux
tag nom complet traduction
table table tableau
caption caption légende
thead table header entête de tableau
tbody table body corps de tableau
th table header cell celule d’entête de tableau
tr table row ligne de tableau
td table data cell cellule de tableau
tfoot table footer Pied de tableau

En complément, vous pouvez toujours consulter la liste du W3C des éléménts de html4 qui inclue également les meta, body et autres head qui ne sont pas cités dans ce tableau.

  1. comprendre moteurs et terminaux de lecture
  2. strike est déprécié mais je l’utilise quand même parce que je le trouve bien pratique
  3. idem pour u, mais il n’y a toujours pas d’équivalent sémantique et conforme alors je l’utilise toujours

Réagissez

Si ce billet vous a plu ou si vous voulez apporter des précisions, ou si vous n’êtes pas d’accord avec ce que je raconte, c’est ici qu’il faut vous manifester. Je me réserve toutefois le droit de supprimer toute contribution insultante ou qui n’aurait rien à voir avec la choucroute.

  1. Je suis assez d’accord sur l’ensemble 🙂 L’utilisation des bons tags aux bons endroits rend le document plus lisible pour une machine (et finalement pour nous aussi, les petits Homme de la planête terre 😉

    Par contre par quoi remplacer le tag ? J’avoue que je n’ai pas cherché, et je doit l’utiliser assez souvent. Plus par manque d’infos, de connaissance dans le domaine que par choix.

  2. De quelle tag parles-tu ? Je crois que wordpress l’a sucré de ton commentaire…

  3. Le c’est comme le div mais c’est un élément inline. Pratique donc pour lui attribuer une class ou un id.

  4. Sitenreveux >> Quel farceur ce wordpress… Il a encore sucré le tag dont tu parlais. Bon je suppose que tu parlais du [span]. Je connaissais l’utilisation de ce tag (mais ne l’utilise quasiment jamais car pas sémantique – beurk) mais je ne connais pas sa signification exacte. « Div » par exemple c’est « division » mais « span » ???

  5. Ho… Je dois avoir ça dans mes cours de Techno web… Je vais regarder.

  6. Je ne suis pas tout à fait convaincu par le manque de sémantique associée aux éléments « hr » « br ».

    Le hr, par exemple peut servir efficacement à séparer des sections dans un texte lorsqu’on ne peut, ni ne veut utiliser de titre « hn ».

    L’élément « br » quant à lui, permet de faire un break au sein d’un paragraphe. Mise à part le comportement visuel (le passage à la ligne) on peut y voir une rupture dans la logique de l’auteur du texte qui peut être porteuse de sens.

    Concernant l’élément img, je suis d’accord, d’autant plus que je l’utilise presque toujours au sein d’un élément « p ». On pourrait presque lui donner la même valeur que le texte si les attributs alt et title décrivent suffisamment l’image.

    PS : le verbe to span semble évoquer l’idée de rassembler, d’unir. L’élément span est donc la réunion de plusieurs éléments (lettres ou mots) sous la même bannière, pourrait-on dire vite fait 😉

  7. J’ai mis à jour le tableau sur le tag [span]. Merci pour le complément d’information br1o 🙂

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.