Niveau : Confirmé

Microformats

Tutoriel par (Traduction Open-source, développeur Web, France - Alsace)
Créé le , mis à jour le (32199 lectures)
Tags : xhtml, microformats

Sommaire


Introduction

Logo microformat

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="http://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="http://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 :

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.

Resssources Web