Microformats 2

Actualité par (Développeur Web, France - Alsace)
Créé le , mis à jour le (10846 lectures)
Tags : sémantique, microformats

Les Microformats vous sont familiers ? Sinon, rendez-vous au tutoriel parlant des Microformats, vous pourrez combler cette lacune ;p (d'ailleurs pour être sûr d'avoir bien compris ce que vous avez appris, allez donc vous faire les dents sur le quiz Microformats). Pour expliquer de manière très concise, ce sont des attributs (en général class et rel) ajoutés aux balises HTML dans le but d'améliorer la sémantique du code et ainsi faciliter sa lecture par les machines (par exemple les robots) mais prioritairement par les humains.

µF 2 a été développé afin de simplifier la tâche des auteurs (ceux qui créent les microformats) et des développeurs d'analyseurs de microformats mais ils permettront également une meilleure utilisation des développeurs Web qui souhaitent ajouter des éléments sémantiques au contenu de leurs publications. Voici en détail les apports intéressants de cette nouvelle mouture.

Les améliorations apportées

Utilisation de préfixes pour identifier les noms de classe

On nous propose d'ajouter des préfixes (j'en connais certains qui commencent déjà à pester ;D) pour améliorer l'identification des classes, des propriétés. La liste de ces préfixes à l'heure actuelle :

  • h- pour les noms de classes racines (exemples : h-card, h-event, h-entry,…)
  • p- pour les propriétés simples (exemples : p-fn, p-summary,…)
  • u- pour les propriétés url (exemples : u-url, u-photo,…)
  • dt- pour les propriétés de date (exemples : dt-start, dt-end,…)
  • e- pour les propriétés dont la valeur est le contenu entier d'une portion de page (exemple : e-content)

Mais pourquoi diable est-on passé à ce type de syntaxe ? A-t-on succombé à la mode du préfixage que l'on retrouve dans les feuilles de style (-moz-, webkit-, -o-, …) ? Plusieurs raisons à cela :

  • On améliore ainsi la recherche des microformats dans la page, la tâche des analyseurs (parseurs) de code microformaté sera ainsi facilité, ils retrouveront plus aisément les données recherchées.
  • Il y aura moins de risques de collisions entre des noms de classes utilisées pour des besoins de mise en forme et celles utilisées pour des raisons sémantiques, évitant ainsi de corriger la mise en page originale. Exemple : description (mise en forme) != p-description (sémantique)
  • La syntaxe est indépendante du vocabulaire utilisé, ainsi, on assure une interopérabilité de ce type de classes qui peuvent être utilisées par d'autres microformats, par les microdata, par RDF,…

Voici les classes racines et leurs propriétés correspondantes détaillées sur le site microformats.org : h-adr, h-card, h-entry, h-event, h-geo.

Les propriétés sont toutes optionnelles et ne sont plus hiérarchisées

En clair, toutes les propriétés d'un microformat donné sont optionnelles et il n'y a plus de sous-propriétés. Cela simplifie et clarifie énormément leur utilisation. Prenons un exemple, voici une hCard "classique" :

<span class="vcard">
 <span class="fn n">
   <span class="given-name">Toto</span>
   <span class="family-name">Schmitt</span>
 </span>
</span>

Beaucoup de balises , la propriété fn est obligatoire, une hiérarchie des différentes classes obligatoire (given-name et family-name doivent être des sous-propriétés de n) pour que le contenu microformaté soit correctement analysé.

Voici ce que cela pourrait donner avec la syntaxe microformats 2 :

<span class="h-card">
   <span class="p-given-name">Albert</span>
   <span class="p-family-name">Schmitt</span>
</span>

Plus de sous-propriétés, moins de balises.

Utilisation d'une seule classe pour plusieurs propriétés

On peut utiliser des classes racines sans utiliser aucune propriété, ces propriétés seront automatiquement déduites à partir du contenu. Un exemple simple à nouveau :

<a class="h-card" href="http://www.tomiungerer.com/">Tomi Ungerer</a>

Les outils d'analyse de ce code vont pouvoir ainsi obtenir le type de microformat et les propriétés, à savoir :

  • Type : h-card
  • Propriété p-name : Tomi Ungerer
  • Propriété u-url : http://www.tomiungerer.com/

Quelques autres particularités des microformats 2 en bref :

Les microformats 2 sont à présent considérés comme étant prêts à être utilisés en production, vous pouvez donc vous lancer ;)

Ressources

Source : http://microformats.org

Commentaires

jeremy-p a dit le

Merci pour cet article très intéressant jojaba !

Moi qui venait à peine de faire le tour des Microformats dans leur version première, il me reste du boulot ! Mais ça m'a l'air très modulable, beaucoup moins contraignant grâce notamment à la disparition des propriétés obligatoires et la déduction intelligente du contenu direct d'une classe racine.

Je signale juste une toute petite erreur il me semble à cet endroit : "given-name et family-name doivent être des sous-propriétés de fn". Ce sont des sous-propriétés de "n" plus exactement si je ne m'abuse :)

jpvincent a dit le

Sinon HTML5 microdata est également très bien supporté par les moteurs de recherche ( schema.org est édité par Google et les autres ) et de base n'a pas de conflit de nommage, puisque ce sont carrément des attributs nouveaux plutôt que des noms de classe qui sont utilisés.
Qu'en penses tu par rapport à microformats ?

Patidou a dit le

Les microformats c'est bien quand on n'utilise pas html5 ou rdfa, sinon bof…

Nico3333fr a dit le

Je croyais que c'était Microdata qui avait le vent en poupe ?

jojaba a dit le

@jeremy-p
Oui, tu as raison, "given-name" et "family-name" sont des sous-propriétés de "n", merci pour cette correction, qui a été faite dans l'article. En guise de récompense un petit "truc" pour ce simplifier la vie : on peut omettre "n" dans "fn" en indiquant le prénom et le nom séparés par un espace, le premier sera interprété comme étant "given-name" et le second "family-name" (je parle ici de microformats 1). En somme on peut faire comme ceci :
====
<span class="fn">Papy Boington</span>
====
Dans ce cas "Papy" est le "given-name" et "Boington" est le "familiy-name" ;)

jojaba a dit le

@jpvincent (peut être aussi @Nico3333fr)
Les Microdatas sont relativement récents, puisque apparus avec HTML5 alors que les microformats sont bien plus anciens (le premier µF fait son apparition en 2003), ce qui leur donne des atouts majeurs : ils ont pu être éprouvés, ils ont évolué, ils ont été pris en compte par bon nombre d'acteurs sur le Web (voir à ce sujet la diapo de Tantek Çelik » http://tantek.com/presentations/2012/07/html5...
Ceci dit, je me suis également posé la même question : Microdatas ou Microformats ? L'idéal serait de dire : « Les deux ! », mais comme je connaissais déjà les Microformats avant de découvrir, grâce à Rodolphe, les Microdatas, mon choix fut vite fait. Ceci dit, il ne serait pas judicieux de ne pas prendre en compte les Microdatas !
Pour donner un petit avantage supplémentaire aux microformats, il faut savoir que les balises html5 <time> et <data> ont été directement inspirées des microformats et doivent leur évolution à ces derniers : http://microformats.org/2012/06/25/microforma...

jojaba a dit le

Gili a dit le

Merci beaucoup pour l'article :-)

A force je suis sûr que je ne vais plus confondre les deux :p

Olivier C a dit le

Il me semble qu'à terme il vaux mieux investir sur les Microdatas : nativement créés pour cette fonction, d'autant plus que le html5 se généralise. Les Microformats sont certes supportés et maintenant ben connus, mais cela fait un peu bricolage, enfin je trouve.

Ceux-ci auront au moins eu le mérite d'être précurseurs dans le domaine, voir même ont peut être inspirés la norme Microdata pour le html5...

petit_suisses a dit le

Google recommande l'utilisation des microdonnées il me semble non ?

jojaba a dit le

Oui, mais les microformats sont également pris en charge : http://support.google.com/webmasters/bin/answ... ;)