Le guide ultime des microformats : références et exemples

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 microformats. Par exemple, Michromeformats est une extension Google Chrome qui découvre pour vous les microformats embarqués dans une page web.
5. Les robots (comme Googlebot) les utilisent pour l'indexation des sites.

1. Ils nécessitent davantage de code HTML.
2. Ils sont encore une chose que vous devez apprendre et maintenir.
3. Ils existent pour relativement peu de types 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.

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 : fournit 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.

<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.

<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.

<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.

<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).

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 obligatoires :

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

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.

<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.

<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.

<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.

<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).

<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.

Vous pouvez aussi utiliser un 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.

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.

<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.

<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.

<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.

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).

<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).

<head profile=&#148;http://www.mysitehere.com/profilename&#148;>

Racine : profile.

<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