Blog de Marti

Il y a des tags HTML que l'on utilise tout le temps, des fois trop, comme le div que certains se sentent obligés de placer autour du moindre autre tag. Et puis il y a ceux qu'on utilise plus rarement, par manque d'opportunité ou par ignorance. Mais si vous avez à coeur de réaliser des sites adapté aux utilisateurs, moteurs de recherche et malvoyants, alors il peut être utile de se remémorer les tags suivants :

1. <abbr title="Abréviation">Abr.</abbr> Le tag abbr est utilisé pour marquer les abréviations. Utilisez l'attribut title pour donner le mot complet (la plupart des navigateurs en tiennent compte et offrent un rendu spécifique).
2. <acronym title="Personnal Computer">PC</acronym> Similaire au tag abbr, sauf que celui là est pour les acronymes (vous connaissez la différence, non ?).
3. <label for="username">Votre pseudo</label> Le tag label est utilisé pour définir une section de HTML comme étant le libellé d'un champ de formulaire (texte, boîte à cocher, etc.). C'est particulièrement utile pour les visiteurs malvoyants car leur navigateur peuvent ainsi associer à chaque champs le texte correspondant, même si l'intitulé ne figure pas directement à côté dans le code HTML. Les utilisateurs d'un navigateur graphique y gagnent aussi, ainsi avec Firefox par exemple le fait de cliquer sur l'intitulé active le champ du formulaire correspond.
4. <address>Jean Martin, 12345 rue du commerce, Trifouilli les oies</address> Voilà un tag qui se passe d'explications. Le code HTML à l'intérieur (retour à la ligne et autres) sont évidemment autorisés.
5. <fieldset><legend>Vos coordonnées</legend>...</fieldset> Le tag fieldset sert à regrouper des éléments d'un formulaire ensemble. Si vous avez par exemple un long formulaire avec une section pour le profil utilisateur, une autre pour ses préférences, etc. alors il est pratique et lisible de les regrouper en fieldset, et d'utiliser le tag legend à l'intérieur pour titrer chaque section (malheureusement le résultat visuel est plus plaisant dans Internet Explorer que Firefox, mais il est possible de styler ce tag avec CSS).
6. <del>Un truc supprimé</del> Les tags s et strike sont retirés du standard HTML car il ne portent pas d'information sémantique et le rendu de texte barré peut être obtenu avec CSS. Mais si vous voulez indiquer qu'une portion de page est censée être supprimée (et pas que du texte d'ailleurs), alors utilisez le tag del qui par défaut rend le texte barré.
7. <... lang="en">My tailor is rich</...> OK lang n'est pas un tag mais un attribut supporté par la plupart des tags HTML. Il permet d'indiquer que le contenu du tag est dans une langue spécifique, et comme il est aussi disponible pour le tag html, il permet de définir la langue par défaut du document (particulièrement utile pour les moteurs de recherce).
8. <tbody>...</tbody> Les tables existent en HTML depuis pas mal d'années, mais la plupart des gens ignorent qu'il faut aujourd'hui les utiliser avec les tags the thead, tbody et tfooter qui servent à définir quelles lignes constutient la tête, le corp et le pied du tableau (Firefox en tire par exemple parti pour imprimer des tables sur plusieurs pages).
9. <noscript>Turn on your Javascript !</noscript> Le tag noscript permet d'indiquer un contenu à afficher si, et seulement si, le navigateur ne gère pas les scripts Javascript (ou s'ils ont été désactivés par l'utilisateur). Plutôt que de laisser tomber vos visiteurs s'ils n'ont pas Javascript en place, vous pouvez utiliser ce tag pour leur donner un contenu alternatif à voir.
10. <button type="submit" name="submit_button" value="1">Mon beau bouton, roi des forêts</button> Tout le monde réalise ses boutons de formulaire avec le tag input. Mais ces boutons sont au format texte seulement, et nécessitent l'usage intensif de styles CSS pour les rendre un peu plus esthétiques. Et bien le tag button lui permet aussi de faire des boutons, mais avec n'importe quel ensemble de HTML en guise de contenu (y compris des images), ce qui permet plus de créativité.