Les microformats ont fait leur apparition en 2003 (XFN) sous l'impulsion de personnes publiant des blogrolls (listes de blogs qui ont plu ou ont été jugés pertinents dans un domaine précis) recherchant un moyen de faire connaître la nature des relations qu'ils entretenaient avec les auteurs de ces blogs. Depuis, ils ont pris une ampleur remarquable et de nombreux microformats ont été développés et améliorés pour divers supports : CV, rapports, protocole Atom, annuaires partagés, citations, traces des discussions en ligne, formats de médias… HTML5 les remet au goût du jour et ils restent un moyen simple, efficace et puissant d'apporter à vos pages de la lisibilité tant pour un humain que pour une machine.
Définition
Les microformats apportent au langage HTML (et par extension XHTML) davantage de sémantique. HTML possède déjà des éléments ayant du sens mais ils ne suffisaient pas à exprimer toutes les subtilités que les microformats proposent. Concrètement, cela va vous permettre d'ajouter, sans employer de grands moyens et sans grandes compétences, du sens au code fourni, afin de le rendre compréhensible par les humains dans un premier temps et par les machines ensuite.
Sachez que ces petits fragments de code ajoutés à certains attributs des balises HTML vous permettent d'optimiser le sens du contenu de vos pages et du coup, d'améliorer leur prise en compte, par exemple, par les moteurs de recherches, mais pas seulement. Avant de poursuivre notre propos, signalons que plusieurs CMS (Systèmes de Gestion de Contenu) tirent déjà partie des fonctionnalités des microformats : Drupal, WordPress, MediaWiki, Plume CMS (XFN)…
Insertion des µF
Entrons à présent dans le vif du sujet : l'ajout de microformats à vos pages de blog ou de site.
Comme indiqué précédemment, le langage HTML nous fournit suffisamment d'éléments afin d'ajouter, sans autre artifice, nos microformats. Deux attributs, principalement, nous permettront de faire cela :
-
L'attribut
rel, signifiant « relation ». Utilisé uniquement dans une balise<a>ou<link>, il permet, par le truchement des microformats, de préciser le type de relation entre la page source (celle dans laquelle on trouve le lien) et la page cible (celle vers laquelle pointe le lien). Exemple connu utilisé pour la définition de la feuille de style dans l'entête d'un document HTML :<link href="theme/default/style.css" rel="stylesheet"> -
L'attribut
class, utilisé principalement à des fins d'identification d'élément pour la modification du style de la page via les CSS, mais permettant également d'ancrer des microformats. Exemple :<a href="//forum.alsacreations.com/profile-3069-jojaba.html" class="nickname">Jojaba</a>
Il existe un troisième attribut, l'attribut rev signifiant « relation inverse » exprimant la relation entre la page cible et la page en cours. Comme il est souvent mal utilisé, nous préférons ne pas traiter cet attribut dans ce tutoriel, d'autant que certains aspects de cet élément seront dépréciés à l'avenir.
Une dernière chose à savoir à propos de ces attributs (rel et class), ils peuvent prendre plusieurs valeurs, qu'on séparera par des espaces. Exemple :
<a href="//forum.alsacreations.com/profile-3069-jojaba.html" class="fn n nickname">Jojaba</a>
Les trois valeurs de l'attribut class sont ici : fn, n et nickname.
Les différents formats disponibles
Maintenant que nous connaissons l'endroit où insérer les microformats dans nos pages HTML, passons aux différentes manières de les utiliser. Trois composantes essentielles : les microformats simples, les design patterns (modèles de conception) et les microformats composés. Voici une liste non exhaustive pour chaque type que nous traiterons dans ce tutoriel :
-
Microformats simples : Rel-License, Rel-Noffolow, Rel-Tag, Rel-Bookmark, XFN. On utilise l'attribut
relpour leur mise en oeuvre. - Design Patterns : Abbr Pattern, Datetime Pattern, Value Class Pattern. Ces « Modèles de conception » permettent de combler le manque de sémantique du langage HTML et seront utilisés dans les microformats composés.
-
Microformats composés : hCard, hCalendar, hAtom, hReview, hResume. On utilisera davantage l'attribut
classpour ce type-là. Comme leur nom l'indique, ils sont composés de plusieurs microformats imbriqués et parfois dépendant les uns des autres.
Il existe bien d'autres µF, mais nous avons préféré nous focaliser sur ceux qui ont déjà fait leur preuve et, pour certains, sont accompagnés d'une spécification bien à eux. Pour de plus amples informations concernant les autres microformats, veuillez vous rendre au wiki officiel : Wiki microformats. Une Traduction d'une grande partie de ce wiki en français est proposée, le maître d'oeuvre de cette traduction étant Christophe Ducamp, grand « gourou » des elanceurs (site non mis à jour mais restant une bonne ressource francophone). Ce tutoriel est d'ailleurs entièrement basé sur des informations tirées de ce wiki.