Les oubliés du html
12 mai 2007 8 commentaires<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.
| 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 |
| tag | nom complet | traduction |
|---|---|---|
| h1, h2, h3… | header | Titre de niveau n |
| p | paragraphe | paragraphe |
| blockquote | quotation block | longue citation |
| div | division | division |
| 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 |
| 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 |
| 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.
- comprendre moteurs et terminaux de lecture
- strike est déprécié mais je l’utilise quand même parce que je le trouve bien pratique
- idem pour u, mais il n’y a toujours pas d’équivalent sémantique et conforme alors je l’utilise toujours
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.
De quelle tag parles-tu ? Je crois que wordpress l’a sucré de ton commentaire…
Le c’est comme le div mais c’est un élément inline. Pratique donc pour lui attribuer une class ou un id.
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 » ???
Ho… Je dois avoir ça dans mes cours de Techno web… Je vais regarder.
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 😉
J’ai mis à jour le tableau sur le tag [span]. Merci pour le complément d’information br1o 🙂
Quelques autres exemples pour compléter ton post 😉
http://www.babylon-design.com/site/index.php/2005/02/17/53-les-balises-meconnues-du-xhtml-1-strict