Comme son nom l'indique, ce microformat s'inspire du format de syndication Atom cousin du fameux protocole RSS permettant, via un flux, de récupérer les informations de différents sites très rapidement. Il respecte donc la syntaxe de ce fil de syndication (Le format de syndication Atom - RFC 4287) mais ne joue pas le même rôle : il se contente de décrire le contenu d'un billet de blog ou d'un article de site. Prenons un exemple concret pour lui ajouter ce qu'il faut en utilisant les propriétés hAtom. Voici le code source de la suggestion d'un livre sur Alsacréations (dans ce cas, c'est une plaquette), proposée par Julie : Mémento XHTML (nous avons supprimé le sommaire afin de raccourcir un peu et d'autres petites broutilles inutiles et avons ajouté quelques informations afin de rendre l'exemple un peu plus croustillant… ;)) :
<div class="livre">
<h2>Mémento XHTML</h2>
<div class="auteur ">
<img src="http://forum.alsacreations.com/avatars/small/21699-sans-titre.jpg" alt="" class="avatar" />
<p>Livre suggéré par <a href="/profil/lire/21699-juliegri.html">juliegri</a> (Etudiante ^^, Fegersheim)<br />
<span class="meta">Mis à jour le 20 Juillet 2009. 4953 lectures.
<br />Tags : <a href="/search/tag/xhtml">xhtml</a></span>
</p>
</div>
<div class="auteur-end"></div>
<div class="infos">
<p class="infos">Critique du Mémento XHTML réalisé par Raphaël Goetter - <a href="http://www.alsacreations.com/livres/lire/794-mmento-xhtml.html">Rétrolien</a></p>
</div>
<div class="doc-content">
<p>Indéchirable et imperméable, cette deuxième édition du mémento XHTML de Raphaël Goetter reposera sur le bureau de tout développeur web soucieux de concevoir des sites web conformes aux standards du Web, interopérables, élégants et faciles à maintenir.</p>
<p>Pendant indispensable au mémento du même auteur sur CSS, il est l'aide-mémoire idéal sur le successeur de HTML et vous dépannera sur les sujets suivants : structure d'un document, balises de paragraphes, images, liens et tableaux, mise en forme, formulaires et objets, conteneurs génériques, classement par type, doctypes XHTML, balises et attributs déconseillés, commentaires XHTML, attribut id versus class...</p>
</div>
Voilà ce que ça pourrait donner après « microformatage » :
<div class="livre hentry">
<h2 class="hentry-title">Mémento XHTML</h2>
<div class="auteur author">
<img src="http://forum.alsacreations.com/avatars/small/21699-sans-titre.jpg" alt="" class="avatar logo" />
<p>Livre suggéré par <span class="vcard"><a href="/profil/lire/21699-juliegri.html" class="fn url">juliegri</a> (<span class="role">Etudiante</span> ^^, <span class="locality">Fegersheim</span>)</span><br />
<span class="meta">Mis à jour le <abbr class="published updated" title="2009-07-20">20 Juillet 2009</abbr>. 4953 lectures.
<br />Tags : <a href="/search/tag/xhtml" rel="tag">xhtml</a></span>
</p>
</div>
<div class="auteur-end"></div>
<p class="infos"><a href="http://www.alsacreations.com/livres/lire/794-mmento-xhtml.html" rel="bookmark" class="entry-summary">Présentation du Mémento XHTML réalisé par Raphaël Goetter</a></p>
<div class="doc-content entry-content">
<p>Indéchirable et imperméable, cette deuxième édition du mémento XHTML de Raphaël Goetter reposera sur le bureau de tout développeur web soucieux de concevoir des sites web conformes aux standards du Web, interopérables, élégants et faciles à maintenir.</p>
<p>Pendant indispensable au mémento du même auteur sur CSS, il est l'aide-mémoire idéal sur le successeur de HTML et vous dépannera sur les sujets suivants : structure d'un document, balises de paragraphes, images, liens et tableaux, mise en forme, formulaires et objets, conteneurs génériques, classement par type, doctypes XHTML, balises et attributs déconseillés, commentaires XHTML, attribut id versus class...</p>
</div>
</div>
Ce code en action :
Les différentes propriétés de ce microformat et leur imbrication :
-
class="hfeed" - Flux, si manquant, c'est la page qui représente le flux.
-
feed category - Mots-clés ou phrases en utilisant rel-tag.
-
class="hentry" - Elément racine [obligatoire]
-
class="entry-title" - Le titre [obligatoire].
-
class="entry-content" - Le contenu, faculatif.
-
class="entry-summary" - Le résumé, facultatif.
-
class="updated" - La date de mise à jour [obligatoire], utilisation du datetime-design-pattern.
-
class="published" - La date de publication, utilisation du datetime-design-pattern.
-
class="author" - Sous forme d'hCard [obligatoire].
-
bookmark (permalien) - facultatif, utilisation de
rel-bookmark.
-
tags (marqueurs) - facultatif. Mots-clés ou phrases en utilisant
rel-tag.
Si certaines propriétés obligatoires n'ont pas de valeur, des valeurs par défaut leurs seront attribuées.
Remarque : Nous vous avons indiqué ici ce qui concerne hAtom 0.1. La version 0.2 de ce microformat est en cours de développement. Dans cette version, tous les éléments à l'intérieur de hentry seront considérés comme étant facultatifs et obtiendront des valeurs par défaut trouvées dans la page HTML en cours.
