• Tweet
• 
• 

Si vous n’êtes pas familier du concept POSH (Plain Old Semantic HTML), la première chose à savoir c’est que produire du code sémantique, qui reflète la valeur du contenu textuel (en plus de la mise en forme) est une composante critique du processus de conception web.

Alors que le HTML dispose d’une kyrielle d’éléments par lesquels le contenu prend du sens, une foultitude de micro-formats (conventions) ont été créé pour mieux représenter les données qui composent votre page.

Les micro-formats, c’est quoi ?

Bien qu’ils ne fassent pas parti des spécifications HTML du W3C, ils offrent un assortiment utile de conventions de nommage (en utilisant les attributs class, id, rel et rev) qui identifient les points d’intérêts sur une page. Ils permettent de mettre en avant du contenu, tel que les évènements de calendrier, un lien vers l’acceptation de vos licences (GPL…), et même des choses plus légères telles que les recettes de cuisines.

Si les micro-formats ne font pas encore parti du standard W3C, les navigateurs web n’ont pas attendu pour en assurer le support.

Les micro-formats valent vraiment le coup d’y porter un intérêt et que vous les implémentiez dans les sites que vous réalisez.

Le site officiel des micro-formats dispose d’un wiki, d’un forum et met différents outils à votre disposition.

Vous utilisez peut-être déjà les micro-formats si vous utilisez un CMS tel que WordPress, car ce dernier supporte nativement des formats de données simples, comme l’attribut rel.

Si vous êtes nouveaux dans l’univers des micro-formats, vous vous demandez certainement pourquoi vous devriez vous embêter à les utiliser ?
Il y a certes des avantages et des inconvénients, mais tout ce qui aidera votre site à être mieux compris par les robots (spiders, crawlers) qui indexent vos pages vaut bien cet effort supplémentaire, non ?

De tous les micro-formats, rel="nofollow" est probablement le plus connu.

Parce que les micro-formats s’appuient sur la syntaxe et les attributs conventionnels du HTML, vous pouvez les utiliser aussi en XHTML. Même les pages XML (comme les flux RSS ou ATOM) peuvent profiter des micro-formats. Cela accroit ainsi leur utilisation potentielle. Ils se combinent également très bien avec le RDFa et les autres meta-données.

Les avantages des micro-formats

1. Ils améliorent la valeur sémantique de votre contenu.
2. D’autres applications web peuvent les utiliser pour découvrir les contenus de votre site. Ils peuvent également servir d’interface avec vos données.
3. Les réseaux sociaux les implémentent dans les profils utilisateurs pour que des services tiers puissent interagir avec eux.
4. Des extensions de navigateurs existent pour donner aux utilisateurs l’accès aux données contenues dans les micro-formats. Par exemple, Michromeformats est une extension Google Chrome qui découvre pour vous les micro-formats embarqués dans une page web.
5. Les robots (comme Googlebot) les utilisent pour l’indexation des sites.

Les inconvénients des micro-formats

1. Ils nécessitent d’avantage de code HTML
2. Ils sont encore une chose que vous devez apprendre et maintenir.
3. Ils existent pour relativement peu de type de données.
4. Ils attirent l’attention sur vos contenus (qui peuvent être data-minés).
5. Les navigateurs ne les supportent pas uniformément.

L’extension Operator pour Firefox détecte les micro-formats et les rend lisibles.

Le micro-format hCard permet aux extensions Firefox telles que Tails Export de découvrir et de s’interfacer avec la carte de visite virtuelle de quelqu’un.

Tableau de référence des micro-formats

Chaque micro-format a un but unique de présenter un certain type d’informations, et ils peuvent tous être potentiellement utiles en fonction de vos besoins.

Bien que vous pourrez trouver des informations exhaustives sur le site des micro-formats, voici un récapitulatif rapide de ce qu’on y trouve :

Nom	But
ADR	Marquer une adresse postale
Geo	Marquer une position géographique
hAtom	Ajouter du contenu syndicable
hAudio	Décrire un podcast ou un fichier audio
hCalendar	Marquer un événement ou lister du contenu par date (concerts, spectacles…)
hCard	Exploiter les contacts d’affaires ou personnels (carte de visite)
hListing	Lister des biens et des services
hMedia	Lister des media
hNews	Utilise hAtom pour les nouvelles journalistiques
hProduct	Embarquer des informations supplémentaires sur un produit.
hRecipe	Marquer des recettes de cuisine
hResume	Présenter les expériences d’un CV
hReview	Avis et notes de produits et services
rel	l’attribut rel est un microformat pour les éléments HTML, quelques exemples populaires : rel="license" rel="nofollow" rel="tag" rel="directory" rel="enclosure" rel="home" rel="payment"
Robot Exclusion Profile	Donner des instructions aux robots
VoteLinks	Fournir des options pour aimer ou ne plus aimer un lien
XFN	Décrire une relation avec un site web
XFolk	Lister des liens favoris
XMDP	Ajouter des ressources sur le profil d’une page
XOXO	Mettre en avant un document ou une liste d’objets

Les valeurs de l’attributs rel

Pour compléter le tableau ci-dessus, voici une description des valeurs de l’attribut rel (raccourci de relationship) :

• License : Identifie les accords de licences (tel que Creative Commons ou GPL) sur une page.
• Nofollow : Indique aux moteurs de recherche de ne pas ajouter de poids ou de valeur à la ressource liée.
• Tag : Applique des mots clés aux liens pour construire un nuage de tags ou de catégories.
• Directory : Indique une liste dans un répertoire (comme un dossier) sur le site courant.
• Enclosure : Pour les liens qui pointent vers des fichiers téléchargeables.
• Home : Fourni un lien permanent vers la page d’accueil d’un site.
• Payment : Indique si un lien pointe vers une page de paiement ou d’achat.

Utiliser les micro-formats : Exemples

Recommander d’utiliser les micro-formats c’est bien, mais fournir des exemples c’est mieux !
Nous allons voir ensemble quelques exemples pour chaque micro-format qui peuvent être implémenté sur votre site.

Pour commencer, le concept clé à comprendre : un micro-format s’identifie par un bout de donnée contenu dans l’attribut de class ou id d’une balise HTML.

La balise peut jouer un rôle dans le type de donnée à afficher (tel que les liens), mais si aucune alternative sémantique existe, vous pouvez utiliser un div ou un span autour du contenu en question. Même si l’utilisation d’un span ne semble pas très élégant, il ajoute une signification spéciale dans ce cas.

Adr

<ul class="adr">

  <li class="street-address">123 North Street</li>
  <li class="locality">Manchester</li>
  <li class="postal-code">MX43 991</li>

  <li class="country-name">UK</li>
</ul>

Racine : adr

Valeurs d’attributs :

• post-office-box
• extended-address
• street-address
• locality
• region
• postal-code
• country-name

Geo

<p class="geo">
  <abbr class="latitude" title="37.408183">N 37° 24.491</abbr> -
  <abbr class="longitude" title="-122.13855">W 122° 08.313</abbr>

</p>

Racine : geo

Valeurs d’attributs obligatoires :

• latitude
• longitude

hAtom

<div class="hAtom">
  <div class="hentry">
    <h3 class="entry-title">I Love Microformats</h3>
    <abbr class="published" title="2010-08-28T13:14:37-07:00">Aug 28, 2010</abbr>

    <p class="category"><a href="/category/rdf" rel="tag">RDF</a></p>
    <p><a href="#" title="Post a comment">What do you think of this post?</a></p>

    <div class="entry-content">
      <p>Place your content right here for maximum impact!</p>
    </div>
    <dl>
      <dt>Tags:</dt>

      <dd><a href="/tag/standards/" rel="tag">standards</a></dd>
      <dd><a href=" /tag/microformats/" rel="tag">microformats</a></dd>

    </dl>
  </div>
</div>

Racine : hAtom, hFeed

Valeur d’attribut :

• hentry
• entry-title
• entry-content
• entry-summary
• bookmark
• published
• updated
• author

hAudio

<p class="haudio">
  <em class="fn">Bohemian Rhapsody</em>
  by <span class="contributor vcard">
  <em class="fn org">Queen</em></span>

  found on <em class="album">A Night at the Opera</em>
</p>

Racine : hAudio

Valeurs d’attributs obligatoires :

• fn
• album

Valeurs d’attributs optionnels :

• contributor
• duration
• item
• position
• category
• published
• photo
• description
• sample
• enclosure
• payment
• price (currency, amount)

hCalendar

Vous pouvez utiliser le générateur hCalendar plutôt que d’écrire le code à la main.

<p class="vEvent">
  <a class="url" href="http://www.yoursitehere.com/">MySite</a>

  <span class="summary">New website launch</span>:
  <abbr class="dtstart" title="20091202">December  2</abbr>-
  <abbr class="dtend" title="20091204">4</abbr>, at
  <span class="location">Google College, London, UK</span>

</p>

Racine : vCalendar, vEvent

Valeurs d’attributs obligatoires :

• dtstart
• summary

Valeurs d’attributs optionnels :

• location
• url
• dtend
• duration
• rdate
• rrule
• category
• description
• uid
• geo (latitude, longitude)
• attendee (partstat, role
• contact
• organizer
• attach
• status

hCard

Vous pouvez aussi utiliser le générateur hCard plutôt que d’écrire le code à la main..

<ul id="hCard-John-Doe" class="vcard">
  <li class="fn">John Doe</li>
  <li class="org">Special Stores</li>

  <li><a class="email" href="mailto:John@doe.org">John@doe.org</a></li>
  <li class="adr">
    <ul>

      <li class="street-address">44 Semantic Drive</li>,
      <li class="locality">Markup City</li>,
      <li class="region">World Wide Web</li>,
      <li class="postal-code">BP33 9HQ</li>

      <li class="country-name">Internet</li>
    </ul>
  </li>
  <li class="tel">01234 56789</li>

 </ul>

Racine : hCard

Valeurs d’attributs obligatoires :

• fn
• n (family-name, given-name, additional-name, honorific-prefix, honorific-suffix)

Valeurs d’attributs optionnels :

• adr (post-office-box, extended-address, street-address, locality, region, postal-code, country-name, type, value)
• agent
• bday
• category
• class
• email (type, value)
• geo (latitude, longitude)
• key
• label
• logo
• mailer
• nickname
• note
• org (organization-name, organization-unit)
• photo
• rev
• role
• sort-string
• sound
• tel (type, value)
• title
• tz
• uid
• url

hListing

<div class="hlisting">
  <p>
    <span class="item fn">Office space</span>
    <span class="offer rent">to rent</span>(<abbr class="dtlisted" title="20100202">2/2/10</abbr>)
  </p>

  <p class="description">50-square-foot space available in local tech office at:
    <div class="location adr">
      <span class="street-address">123 Microland Road.</span>
      <span class="locality">Cyberspace</span>, <span class="region">XD</span>

      <span class="postal-code">12345</span>
      <span class="country">Mars</span>
    </div>
    Available during <abbr class="dtexpired" title="20100401">April 2010</abbr>

    for <span class="price">$1500/qtr</span>
  </p>
  <div class="lister vcard">
    Contact:
    <span class="fn">John Doe</span>

 at <span class="tel"><span class="value">(01) 12345-678900</span>(<abbr class="type" title="cell">C</abbr>)</span>

  </div>
</div>

Racine : hlisting

Valeurs d’attributs obligatoires :

• description
• lister (fn, email, url, tel)
• action (sell, rent, trade, meet, announce, offer, wanted, event, service)

Valeurs d’attributs optionnels :

• version
• dtlisted
• dtexpired
• price
• item (fn, url, photo, geo, adr)
• summary
• tag
• permalink

hMedia

<div class="hmedia">
  <h3 class="fn">Introduction to the Open Media Web</h3>
  <object class="player" type="application/x-shockwave-flash" data="http://www.exampleurl.com/video.swf">

    <param name="movie" value="http://www.exampleurl.com/video.swf"/>
    <param name="allowScriptAccess" value="always"/>
    <param name="allowFullScreen" value="true"/>

  </object>
  <ul>
    <li><a rel="enclosure" type="video/mp4" title="Download the movie" href="http://www.exampleurl.com/video.mp4">Video.mp4</a></li>

</ul>
</div>

Racine : hMedia

Valeur d’attribut :

• fn
• contributor
• photo
• player
• enclosure

hNews

<div class="hnews hentry item">
  <h4 class="entry-title">Microformats are awesome</h4>
  <p class="author vcard">

  By <span class="fn" >John Doe</span>,
  <span class="source-org vcard dateline"><span class="org fn">Associated Press</span></span> -
  <span class="updated" title="2010-04-19">19 April 2010</p>

  <p>News story</p>
</div>

Racine : hNews

Valeur d’attribut obligatoire :

• hentry
• item
• entry-title
• author
• source-org
• vcard
• updated

Valeurs d’attributs optionnels :

• dateline
• geo (latitude, longitude)
• item-license
• principles

hProduct

<ul class="hproduct">
  <li class="brand">MySite!</li>
  <li class="category">Software</li>

  <li class="fn">Microsoft Office 2007</li>
  <li class="description">The world's most popular office suite.</li>
  <li class="url">http://office.microsoft.com</li>

</ul>

Racine : hProduct

Valeur d’attribut obligatoire :

• fn

Valeurs d’attributs optionnels :

• brand
• category
• price
• description
• photo
• url
• review
• listing
• identifier (type (model, mpn, upc, isbn, issn, ean, jan, sn, vin, sku), value)

hRecipe

<div class="hrecipe">
<h3 class="fn">Quick noodles</h3>
  <p class="summary">Noodles are quick and easy, like this example!</p>
  <p class="ingredient hcard"><span class="value">2.5</span><span class="type">kilogram</span>bag of instant noodles.</p>

  <ul class="instructions">
    <li>Put water on to boil,</li>
    <li>Add the powder for the sauce,</li>
    <li>Add the noodles, and stir till ready.</li>

  </ul>
  <p>Enough for <span class="yield">1 adult</span>.</p>
  <p>Preparation time is approximately <span class="duration">5 <abbr title="minutes">mins</abbr></span>.</p>

  <p class="nutrition hcard">Noodles have more than <span class="value">500</span> <span class="type">joules</span> of energy.</p>

</div>

Racine : hRecipe

Valeurs d’attribut obligatoires :

• fn
• ingredient (value, type)

Valeurs d’attributs optionnels :

• yield
• instructions
• duration
• photo
• summary
• author
• published
• nutrition (value, type), tag

hResume

Vous pouvez aussi utiliser le générateur hResume plutôt que d’écrire le code à la main.

<div id="hResume">
  <p class="summary">I have been producing microformatted data for years</p>
  <ul class="vcard">

    <li class="fn">Jane Doe</li>
    <li class="adr">
      <span class="street-address">44 Broadband Street</span>
      <span class="locality">Microland</span>, <span class="region">Internet</span>

      <span class="postal-code">QW11 ER4</span></li>
    <li>Email: <a class="email" href="mailto:jane@doe.org">jane@doe.org</a></li>

    <li>Homepage: <a class="url" href="http://www.yoursitehere.com/">www.yoursitehere.com</a></li>
    <li>Phone: <span class="tel">+44 12345 67890</span></li>

  </ul>
  <ol class="vcalendar">
    <li class="education vevent"><a class="url summary" href="http://example/">Example</a>(<abbr class="dtstart" title="2007-02-11">2007</abbr> - <abbr class="dtend" title="2009-03-22">2009</abbr>)</li>

  </ol>
  <ol class="vcalendar">
    <li class="experience vevent"><span class="summary">CEO</span>, <span class="location">Microland</span>, <abbr class="dtstart" title="2006-09-01">May 2006</abbr> - <abbr title="2009-05-22">present</abbr></li>

  </ol>
  <ul class="vcard">
    <li><a href="/jdoe/index.php" class="include" title="Jane Doe"></a></li>

    <li class="org">MicroLand</li>
    <li class="title">CEO</li>
  </ul>
  <p>I have skills in
    <a class="skill" rel="tag" href="http://en.wikipedia.org/wiki/HTML">HTML</a> and
    <a class="skill" rel="tag" href="http://en.wikipedia.org/wiki/CSS">CSS</a>.
  </p>

</div>

Racine : hResume

Valeur d’attribut obligatoire :

• contact (hCard + adr)

Valeurs d’attributs optionnels :

• summary
• education (hCard + vEvent)
• experience (hCard + vEvent)
• affiliation (hCard)
• skills
• publications

hReview

Vous pouvez aussi utiliser le générateur hReview plutôt que d’écrire le code à la main.

<div class="hreview">
  <p><span class="rating">5</span> out of 5 stars</p>
  <h4 class="summary">Noodle Hut</h4>

  <span class="reviewer vcard">Reviewer:
    <span class="fn">John Doe</span> - <abbr class="dtreviewed" title="20070418T2300-0700">April 18, 2007</abbr>

  </span>
  <p class="description item vcard">
    <span class="fn org">Noodles Hut</span> is one of the best little places out there!
  </p>
  <ul>

    <li>Visit date: April 2007</li>
    <li>Food eaten: Instant noodles</li>
  </ul>
</div>

Racine : hReview

Valeur d’attribut obligatoire :

• item (type (product, business, event, person, place, website, url), hCard / hCalendar)

Valeurs d’attributs optionnels :

• reviewer (hCard)
• version
• summary
• dtreviewed
• rating
• description
• tags
• permalink
• license

Rel

<a rel="license" href="http://creativecommons.org/licenses/by/2.0/">Some rights reserved.</a>
<a rel="nofollow" href="http://www.w3.org/">World Wide Web consortium</a>

Valeurs d’attributs :

• license
• nofollow
• tag
• directory
• enclosure
• home
• payment

Robot Exclusion Profile

<head profile="http://example.org/xmdp/robots-profile#">
</head>
...
<p><img src="exclusive.png" class="robots-noarchive" alt="Exclusive image" /></p>

Valeurs d’attributs :

• robots-nofollow
• robots-follow
• robots-noindex
• robots-index
• robots-noanchortext
• robots-anchortext
• robots-noarchive
• robots-archive

VoteLinks

<a rev="vote-for" href="http://www.yoursitehere.com/vote.php?id=yes" title="Vote yes!">Vote Yes!</a>
<a rev="vote-abstain" href="http://www.yoursitehere.com/vote.php?id=maybe" title="Vote maybe!">Vote Maybe!</a>

<a rev="vote-against" href="http://www.yoursitehere.com/vote.php?id=no" title="Vote no!">Vote No!</a>

Valeurs d’attributs :

• vote-for
• vote-abstain
• vote-against

XFN

Vous pouvez aussi utiliser le générateur XFN plutôt que d’écrire le code à la main.

<a href="http://www.yoursitehere.com" rel="me">My Site!</a>

Valeurs d’attributs :

• Friendship (contact, acquaintance, friend)
• Physical (met)
• Professional (co-worker, colleague)
• Geographical (co-resident, neighbor)
• Family (child, parent, sibling, spouse, kin)
• Romantic (muse, crush, date, sweetheart)
• Identity (me)

xFolk

<ul>
  <li>
    <ul class="xfolkentry">
      <li><a class="taggedlink" href="http://www.google.com" title="Google">Google</a></li>

      <li class="description">The home page of the world's biggest search engine</li>
      <li class="meta">Tags:
        <a rel="tag" href="http://del.icio.us/tag/google">google</a>

        <a rel="tag" href="http://del.icio.us/tag/search">search</a>
      </li>
    </ul>
  </li>

</ul>

Racine : xFolkEntry

Valeurs d’attributs obligatoires :

• description
• taggedlink
• title

Valeur d’attribut optionnel :

• meta (tag)

XMDP

<head profile=”http://www.mysitehere.com/profilename”>

Racine : profile

XOXO

<ol class="xoxo">

  <li>Subject 1
    <ol>
      <li>item a</li>
      <li>item b</li>
    </ol>

  </li>
  <li>Subject 2
    <ol>
      <li>item a</li>
      <li>item b</li>

    </ol>
  </li>
</ol>

Racine : XOXO

Conclusion

Un tas de microformats existent déjà, et la communauté cherche toujours des manières d’utiliser des balises existantes pour valoriser d’avantage l’information contenue dans vos pages web.
Ils ne présentent pas seulement un intérêt pour les moteurs de recherche et les réseaux sociaux, mais également pour les utilisateurs qui naviguent sur votre site.

Article original de Alexander Dawson traduit de l’anglais : http://sixrevisions.com/web-development/ultimate-guide-to-microformats-reference-and-examples/