Microformat hCard : présentation et meilleurs exemples par Tim Van Damme

Connaissez-vous ces sites web un peu particuliers présentés sur une seule et même page et prenant la forme d’une carte de visite format web ? Leur particularité est d’être construits à l’aide des Microformats. Tim Van Damme, sur son site « Wall of Fame », nous liste les plus beaux exemples…

Microformats kesako ?

Les Microformats sont nés au début des années 2000 dans le but d’apporter plus de sémantique aux contenus affichés sur le web. Bien que le standard (X)HTML apporte déjà un certain niveau de sémantique grâce aux balises, cela ne suffit pas pour cibler très précisément un contenu.

Exemple : la balise <p> nous permet de savoir qu’il s’agit d’un paragraphe mais ne nous permet pas de connaître la nature de son contenu ou en d’autres termes le « sens » des mots qui le composent.

Le but des Microformats est donc d’ajouter un niveau sémantique plus strict que celui du standard (X)HTML en vue d’automatiser le traitement d’un contenu web par des machines.

Microformats : comment ça marche ?

Pour apporter ce niveau sémantique supplémentaire les Microformats s’appuient sur les balises (X)HTML couplées aux attributs « rel » et « class » pour donner du sens au contenu.

Puisqu’il existe une infinité de contenus potentiellement formatables, il existe de nombreuses spécifications en fonction de la nature du contenu formaté. On retrouvera par exemple les Microformats suivant :

  • vCard : carte de visite électronique (ex : fiche de contact Outlook)
  • hCard : carte de visite format Web (une vCard affichée dans une page web)
  • geo : formatage de coordonnées géographiques
  • hCalendar : formatage de données temporelles
  • adr : formatage d’adresses
  • XFN : formatage de données de type réseaux sociaux
  • etc…

Je viens d’en citer 6 mais il existe de nombreux Microformats différents, tous liés à un type de contenu à formater.

Le Microformat hCard

Pour mieux comprendre comment il est possible d’utiliser les Microformats, nous allons nous appuyer sur la spécification hCard servant à afficher une vCard au sein d’une page Web.

Exemple d’une carte de visite XHTML basique :

All for Design

Aurelien Dupond

Marseille, France

Mobile : 06.05.04.03.02

Le code XHTML :

<div class="vcard-ex">
 <p><a href="http://all-for-design.com" title="All for Design, le blog">All for Design</a></p>
 <p>Aurelien Dupond</p>
 <p>Marseille, France</p>
 <p>Mobile : 06.05.04.03.02</p>
</div>

Si je veux formater ce contenu, je vais utiliser la spécification hCard (car il s’agit d’une carte de visite). Comme vous pourrez le constater il n’y a aucune différence visuelle entre la version formatée et la version classique. La seule différence se situe au niveau du contenu.

La même carte de visite avec le Microformat hCard :

All for Design

Aurelien
Dupond

Marseille
France

Mobile :
06.05.04.03.02

Le code XHTML :

<div class="vcard">
 <a class="url" href="http://all-for-design.com">All for Design</a>
 <p class="fn n">
  <span class="given-name">Aurelien </span> 
  <span class="family-name">Dupond </span>
 </p>
  <p class="adr">
   <span class="locality">Marseille</span> 
   <span class="country-name">France</span> 
  </p>
 <p class="tel">
  <span class="type">Mobile :</span>
  <span class="value">06.05.04.03.02</span>
 </p>
</div>

Quelques explications

Comme vous le voyez, le Microformat hCard utilise les balises XHTML. Vous pouvez utiliser les balises que vous voulez pour peu que vos choix soient sémantiquement corrects.

Comme cet exemple est très simple et que je ne vais pas faire un cours de sémantique XHTML, j’ai simplement utilisé des balises <p> et <span>.

Dans le cas de hCard plus complexes on pourra utiliser des listes de définition dd/dl/dt, éventuellement couplées à des listes ordonnées ol/li s’il y a beaucoup de sous-sections, afin d’obtenir le code le plus logique possible d’un point de vue sémantique. (Pour approfondir, vous pouvez aller lire les articles de Luc Muller et de Bruno Bichet sur ce sujet).

Continuons l’explication du code…

<div class="vcard">

La proriété « vCard » est obligatoire. Elle va englober tout le contenu de votre carte de visite.

Question : Pourquoi utiliser la propriété « vCard » alors qu’il s’agit du Microformat « hCard »?

Le Microformat « hCard » emprunte les propriétés du Microformat « vCard » car il a été conçu après. (vCard est le nom d’un Microformat mais c’est aussi le nom d’une des propriétés de celui-ci.).

<a class="url" href="http://all-for-design.com">All for Design</a>

On utilise la propriété « url » pour désigner une adresse web. On peut la coupler avec d’autres propriétés pour être plus précis : « url org » pour l’adresse d’une société, « url nickname » pour spécifier une adresse rattachée à un surnom (ex : url de votre compte twitter rattachée à votre username). etc etc…

 <p class="fn n">
  <span class="given-name">Aurelien </span> 
  <span class="family-name">Dupond </span>
 </p>

La propriété « fn » sert à spécifier le nom d’une personne. C’est une propriété obligatoire dans le Microformat hCard.

La propriété « n » est un peu « batarde » puisqu’elle n’est pas tout le temps obligatoire et qu’elle peut prendre une valeur nulle. Elle va regrouper les différentes parties du nom d’une personne. Pour plus d’information, rendez-vous sur la documentation officielle.

« given-name » contient le prénom et « family-name » contient le nom de famille.

Note : nous aurions pu nous passer de « given-name » et de familly-name » et faire tenir le nom complet directement dans <p class="fn n"> comme ceci :

<p class="fn n">Aurelien Dupond</p>
      OU
<p class="fn">Aurelien Dupond</p>

Continuons…

 <p class="adr">

La propriété « adr » désigne l’ensemble des constituants d’une adresse. Puisqu’en général une adresse est composée de plusieurs éléments, cette propriété en contiendra d’autres.

<span class="locality">Marseille</span> 
<span class="country-name">France</span> 

La propriété « locality » désigne la ville et « country-name » désigne le pays. Il existe beaucoup de sous-propriétés pour « adr« . Pour plus d’informations, rendez-vous sur la documentation officielle.

 <p class="tel">
  <span class="type">Mobile :</span>
  <span class="value">06.05.04.03.02</span>
 </p>

La propriété « tel » permet d’indiquer un numéro de téléphone, « type » contient le type de numéro (domicile, travail, fixe, mobile etc.) et « value » contient la valeur du numéro.

Le succès des Microformats tient au fait qu’ils soient basés sur des standards existant. Ils sont en ce sens très simples et très flexibles. Puisque nous utilisons les balises (X)HTML pour créer notre hCard, nous pouvons utiliser les CSS pour ajouter des styles et ainsi donner plus d’attrait au contenu. De la même façon, nous pouvons ajouter le langage Javascript pour animer ce contenu.

En utilisant le Microformat hCard, nous permettons aux logiciels capables de traiter ce type de contenu d’en extraire facilement les informations. Une hCard peut être téléchargée et sera automatiquement convertie en vCard pour être, par exemple, ajoutée à un carnet d’adresse électronique.

De plus, l’utilisation des Microformats permet de mieux structurer les informations et donc d’en améliorer le référencement par les moteurs de recherche.

Les plus beaux exemples de hCard

Le célèbre webdesigner Tim Van Damme a été l’un des premiers à proposer une hCard de grande qualité, esthétiquement et techniquement très réussie.

Voyant que sa petite création avait fait des envieux, il a eu la bonne idée de regrouper dans son « Wall of Fame » de nombreux exemples de hCard, la plupart inspirés (et non copiés sans autorisation comme il le dénonce dans le « Wall of Shame») de sa propre création.

Voici quelques exemples de hCard sélectionnés par Tim Van Damme :

hCard Tim Van Damme _Screenshot

hCard Michael Villar _Screenshot

hCard Rogie King _Screenshot

hCard Matthias Kretschmann _Screenshot

hCard Lee Adams Norris _Screenshot

hCard Felix Niklas_Screenshot

hCard Evert Slagter_Screenshot

Comme vous pouvez le voir dans ces quelques exemples, l’utilisation des Microformats ne limite en rien l’esthétique d’une page, bien au contraire…

Conclusion

En réalisant cet article je me suis plongé dans l’univers passionnant des Microformats. J’ai appris beaucoup de choses et je suis maintenant convaincu du bénéfice de leur utilisation.

Même si la densité des informations et le nombre de Microformats existant peuvent faire peur à première vue, je pense que cela vaut le coup de se pencher de plus près sur le sujet et je vous invite donc à faire de même !

Quelques liens pour finir :

Documentation :

Articles :

Ressources & Outils:

Tim Van Damme:

8 réflexions au sujet de « Microformat hCard : présentation et meilleurs exemples par Tim Van Damme »

  1. Salut Max,
    merci :)
    De mon côté j’en avais entendu parler mais sans vraiment me pencher sur la question.

  2. J’ai aussi déjà entendu parler de ces fameux microformat sans trop m’y attarde : http://www.css4design.com/blog/proposition-de-balisage-html-semantique-du-microformat-hcard + http://billaut.typepad.com/jm/2007/10/connaissez-vo-8.html (les articles sont très anciens). Moi qui a l’époque me *foutait* carrément des sémantiques du Web voit maintenant l’intérêt de ces cards. Le wall of fame est tres impressionnant aussi avec des fabuleux examples . Le wall of shame qui est a le mérite d’être assez explicite, que sa serve de leçon !
    .-= Dernier blog de Eric : L’influence d’internet sur les modèles économiques d’aujourd’hui =-.

  3. Ping : Twitter Trackbacks for Microformat hCard : présentation et meilleurs exemples par Tim Van Damme | All For Design [all-for-design.com] on Topsy.com

  4. I agree with you on the first issue then again, the next point I would have to take issue with you on just because I do not fully grasp your line of reasoning. Are you able to be more clear on why you feel this way? Thank you and I am looking forward to your reply.

  5. @deluxeRealEstateFroms : This article is a bit old from now but thanks for your feedback I appreciate :)

    @animation, I’m not sure to understand the meaning of your comment

Laisser un commentaire

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

CommentLuv badge