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
etfamily-name
doivent être des sous-propriétés den
) 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 :
- Il est bien entendu possible de combiner plusieurs types de microformats : combiner des microformats sur le site officiel.
- La rétro-compatibilité peut être assurée : rétro-compatibilité sur le site officiel.
Les microformats 2 sont à présent considérés comme étant prêts à être utilisés en production, vous pouvez donc vous lancer ;)
Ressources
- Sur le site officiel : microformats 2, traduction FR de la page microformats 2
- Diaporama HTML5 & microformats 2 proposé par Tantek Çelik
Commentaires
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 :)
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 ?
Les microformats c'est bien quand on n'utilise pas html5 ou rdfa, sinon bof…
Je croyais que c'était Microdata qui avait le vent en poupe ?
@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" ;)
@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...
@Patidou
http://microformats.org/2012/06/25/microforma... ;)
Merci beaucoup pour l'article :-)
A force je suis sûr que je ne vais plus confondre les deux :p
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...
Google recommande l'utilisation des microdonnées il me semble non ?
Oui, mais les microformats sont également pris en charge : http://support.google.com/webmasters/bin/answ... ;)