Microformat, Html, Web Sémantique, et balisage

Suite à l'atelier web sémantique du WASP café france (j'y étais pas, je faisais autre chose... genre du TYPO3...).

Frederique de villamil, propose une description sémantique pour décrire une vcard.

La dessus, Bruno Bichet, rajoute une couche de sémantique à l'aide de balise ul/li hx.

Pour aller encore plus loin, j'aimerai rappeler que le HTML propose des balises qui sont bel et bien faites pour ajouter une portée sémantique au contenu qu'elle struturent.

Pour comparer voici ce que l'on trouve chez Frédéric :

<div class="vcard">
    <a class="fn n url" xhref="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>

ainsi que chez bruno

<ol class="vcard">
  <li>
      <h4>Identités</h4>
      <ul>
          <li class="fn n url">
            <a xhref="http://www.brunobichet.fr">
              Bruno Bichet
            </a>
          </li>
          <li class="fn nickname url">
            <a xhref="http://www.css4design.com">
              br1o
            </a>
          </li>
          <li class="photo url">
            <a xhref="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>

Voici finallement ma proposition :

 <dl class="vcard">
    <dt class="fn n url"><a xhref="http://lucmuller.free.fr/">Luc Muller</a></dt>
    <dd>
        <dl>
            <dt>Adresses</dt>
            <dd class="adr">
                <ol>
                    <li>
                        <dfn class="type">Domicile</dfn>
                        <address>
                            <span class="street-address">18 rue de la voie</span><br /><span class="postal-code">66666</span><br /><span class="locality">Le La ville city</span>,<br /><span class="country-name">France</span>
                        </address>
                    </li>
                    <li>
                        <dfn class="type">Bureau</dfn>
                        <address>
                            <span class="street-address">18 rue de la voie</span><br /><span class="postal-code">66666</span><br /><span class="locality">Le La ville city</span>,<br /><span class="country-name">France</span>
                        </address>
                    </li>
                </ol>
            </dd>
            <dt>Téléphone</dt>
            <dd class="tel">
                <ol>
                    <li><span class="type">Mobile</span> +33 (6)66666666</li>
                    <li><span class="type">Bureau</span> +33 (3)88888888</li>
                </ol>
            </dd>
            <dt>Email</dt>
            <dd>
                <ol>
                    <li class="email">luc.muller(@)gmail.com</li>
                    <li class="email">l.muller(@)ameos.com</li>
                </ol>
            </dd>
        </dl>
    </dd>
 </dl>

Voila pour ma suggestion, j'utilise pas mal de dl pour décrire une liste de définition, puis dt pour le terme a définir et dd pour les définition. dans les dd si les items sont nombreux, je les énumères avec des ol/li et au besoins, j'aoute une intro avec un dfn.

N'oublions pas les tag html spécifiques tel que address pour une fois que cela peut servir.

Voila, voila, je ne suis bien évidemment pas expert des microformats, donc je suis ouvert à toute suggestion.

Liberté d'expression :

Par Viper, mardi 29 avril 2008 à 21:04

Compte tenu, de la haute teneur en Html dans le code source du billet, et de l'éditeur de text rich que j'ai en admin, je ne peux plus éditer l'article.Je voulais juste rajouter que vous pouvez tester la sources en XHTML strict 1.0 : ça valide... ;)

Par bruno bichet, mardi 29 avril 2008 à 21:34

Salut, Oui effectivement l'utilisation combinée des listes de définition et des listes ordonnée est bien vue, bien que ton exemple (et le mien également) est un peu complexe à mettre en oeuvre au niveau html.  J'ai fais une MAJ de mon billet pour tester une solution très simple à base de DL DD uniquement. Dis-moi ce que tu en penses ! a++

Flux RSS des commentaires

Donner son avis

les indications suivies d'un * sont obligatoires

Pseudo* :

e-mail :

Site Web :

Votre Commentaire* :

Filtre anti-spam

Quelle était la couleur du cheval "blanc" d'henri IV ?*

Votre IP est : 50.16.132.180.
En cliquant sur poster, vous acceptez qu'elle soit enregistrée et vous engagez à ce que votre commentaire respecte la législation en vigueur.
Je supprimerai tout commentaire hors de propos.

Se souvenir de mes informations