HTML & CSS

Proposition de balisage HTML sémantique du microformat hCard

En lisant ce billet de Frédéric de Villamil sur le compte rendu du troisième WASP café France dans lequel il présente un exemple de structuration du microformat hCard, je n’ai pu m’empêcher d’ajouter mon grain de sel pour remplacer la divite et la spanite par une structure à base de listes imbriquées que je trouve comment dire… plus sémantique…

En effet, dans leur précipitation à mettre en avant les attributs des microformats, les promoteurs du « web sémantique » en oublient souvent de travailler le code HTML qui se trouve autour. Bien que les exemples donnés généralement soient destinés à être personnalisés, force est de constater que les exemples sont souvent repris tels quels. Save the markup, save the web? Maybe 😉

L’exemple hCard fournit par Frédéric

D’après l’exemple donné dans la documentation officielle :

<div class="vcard">
  <a class="fn n url" href="http://fredericdevillamil.com">
    Frédéric de Villamil
  </a>
  <div class="adr">
      <span class="type">Domicile</span>:
      <div class="street-address">12 rue Danton</div>
      <span class="postal-code">94270</span>
      <span class="locality">Le Kremlin-Bicêtre</span>,
      <div class="country-name">France</div>
  </div>
  <div class="tel">
      <span class="type">Mobile</span> +33-6-62-1337
  </div>
  <div>Email:
      <span class="email">frederic@de-villamil.com</span>
  </div>
</div>

Ma proposition de balisage pour le format hCard

J’ai ajouté quelques attributs pour enrichir un peu l’ensemble :

<ol class="vcard">
  <li>
      <h4>Identités</h4>
      <ul>
          <li class="fn n url">
            <a href="http://www.brunobichet.fr">
              Bruno Bichet
            </a>
          </li>
          <li class="fn nickname url">
            <a href="http://www.css4design.com">
              br1o
            </a>
          </li>
          <li class="photo url">
            <a href="http://www.css4design.com/identite_100x100.png">
              Tu veux ma photo ?
            </a>
          </li>
          <li class="note">
            Intégrateur web, blogdesigner et formateur
          </li>
      </ul>
  </li>
  <li>
      <h4 class="type">Adresse</h4>
      <ul class="adr">
          <li class="street-address">1, rue de l'intégration HTML</li>
          <li class="postal-code">69007</li>
          <li class="locality">Lyon sur CSS</li>
          <li class="country-name">France</li>
      </ul>
  </li>
  <li>
      <h4>Téléphones</h4>
      <ul class="tel">
          <li class="type">Mobile : +33 6 00 00 00 00</li>
          <li class="type">Fixe : +33 4 00 00 00 00</li>
      </ul>
  </li>
  <li>
      <h4>Emails</h4>
      <ul>
          <li class="email">infographiste@gmail.com</li>
          <li class="email">bruno.bichet@gmail.com</li>
          <li class="email">br1o@live.fr</li>
      </ul>
  </li>
</ol>

Ce qui donne la mise en forme suivante selon la feuille de style employée globalement sur le blog :

  1. Identités

  2. Adresse

    • 1, rue de l’intégration HTML
    • 69007
    • Lyon sur CSS
    • France

  3. Téléphones

    • Mobile : +33 6 00 00 00 00
    • Fixe : +33 4 00 00 00 00

  4. Emails

La même hCard en liste de définition

Mise-à-jour : Sur une remarque judicieuse d’Aymeric dans ce commentaire, voici la version « liste de définition ». Cette version semble effectivement plus adaptée : plus légère et le code est plus clair. Que du bon air, heu… du bonheur 🙂

<dl class="vcard">
  <dt>Identités</dt>
  <dd class="fn n url"><a href="http://www.brunobichet.fr">Bruno Bichet</a></dd>
  <dd class="fn nickname url"><a href="http://www.css4design.com">br1o</a></dd>
  <dd class="photo url"><a href="http://www.css4design.com/identite_100x100.png">Tu veux ma photo ?</a></dd>
  <dd class="note">Intégrateur web, blogdesigner et formateur</dd>

  <dt class="type">Adresse</dt>
  <dd class="adr street-address">1, rue de l'intégration HTML</dd>
  <dd class="adr postal-code">69007</dd>
  <dd class="adr locality">Lyon sur CSS</dd>
  <dd class="adr country-name">France</dd>

  <dt>Téléphones</dt>
  <dd class="tel type">Mobile : +33 6 00 00 00 00</dd>
  <dd class="tel type">Fixe : +33 4 00 00 00 00</dd>

  <dt>Emails</dt>
  <dd class="email">infographiste@gmail.com</dd>
  <dd class="email">bruno.bichet@gmail.com</dd>
  <dd class="email">br1o@live.fr</dd>
</dl>

Ce qui nous donne le résultat brut de décoffrage suivant. (A noter que cette version oblige à ajouter certaine classes comme adr ou tel à chaque entrée de définition alors que dans la version précédente, nous avions la liste imbriquée ul pour englober l’ensemble) :

Identités
Bruno Bichet
br1o
Tu veux ma photo ?
Intégrateur web, blogdesigner et formateur
Adresse
1, rue de l’intégration HTML
69007
Lyon sur CSS
France
Téléphones
Mobile : +33 6 00 00 00 00
Fixe : +33 4 00 00 00 00
Emails
infographiste@gmail.com
bruno.bichet@gmail.com
br1o@live.fr

Pour conclure

Je ne suis pas un expert en microformats et je me pose pas mal de questions. Dans mon exemple, vaut-il mieux utiliser la classe email sur chaque élément de liste li ou une seule fois dans la balise ul ? Si vous avez des suggestions concernant le placement des attributs des microformats dans le balisage HTML, n’hésitez pas à participer 😉

PS : connaissez-vous le site des microformateurs pour suivre l’actualité des microformats en français ?

Publié le par Bruno Bichet