Du bon usage de la sémantique : microformats et futur de la recherche sur Internet

Logo microformats

Pendant que la bataille fait rage du côté des sites Web 2.0 (mais c’est un des leviers de l’innovation sur Internet que l’on aime ou pas cette appellation), une révolution silencieuse se met en marche : le Web sémantique ou encore le Web 3.0.
Jusqu’à présent, les moteurs de recherche (Google, Yahoo!, Windows Live Search, Exalead etc.) avaient pour défi le recensement du plus grand nombre de documents et des résultats de recherche pertinents.

S’il faudra bien évidemment soigner l’intitulé des liens, il faudra avant tout donner du sens à vos documents. C’est tout l’intérêt d’une programmation propre, respectant les standards et utilisant la sémantique à bon escient.

Les microformats sont pour moi un élément essentiel qui accéléreront le processus et permettront de comprendre l’intérêt de la sémantique.

Qu’est-ce que la sémantique ?

La sémantique est loin d’être une invention de l’informatique puisque ce principe est à la base de toutes les langues du monde. La sémantique se réfère tout simplement au sens exprimés par les mots. Ce concept peut être à vrai dire être élargi à tout ce qui structure de l’information.

Plus concrètement encore, ouvrez un journal (Le Figaro, Libération ou même Voici) et prenez une page au hasard. Vous arriverez sans peine et surtout sans lire le texte à discerner les titres d’articles, leur résumé, leurs passages clés et leur texte à proprement parler. Pourquoi ? Parce que tous ces éléments sont présentés de manière différente, utilisent une police de caractère différente et ont une taille différente. Un titre d’article sera naturellement plus grand et plus épais que l’article ; le résumé sera situé sous le titre et sera espace du texte l’article en lui-même.

Et si vous ne prenez pas garde à la sémantique en elle-même c’est parce qu’elle silencieuse et logique : votre cerveau analyse lui-même ce qu’il faut faire car il comprend la signification de la disposition sans avoir à comprendre ce qui est écrit.

Bien structurer une page HTML

Récemment encore j’entendais de la bouche d’une agence Web on fait des sites aux standards, avec des div et du CSS. C’est déjà bien de passer au validateur mais c’est encore mieux si on produit du code significatif.
Voici deux exemples de code qui contiennent les mêmes textes et qui respectent le standard (X)HTML.

Méthode sémantiquement correcte :

<div id="introduction">
	<h2>Site valide HTML</h2>
	<p>Cette portion de code a un code HTML valide.</p>

	<p class="suite"><a href="./edito">Lire la suite de l'édito</a></p>
<div>

Méthode sémantiquement incorrecte :

<div id="page_haut">
	<div class="titre rouge">Site valide HTML</div>
	<div class="texte">Cette portion de code a un code HTML valide.</div>

	<div class="texte petit"><a href="./?page=12345">Lire la suite de l'édito</a></div>
</div>

Sans avoir à donner un cours de balisage, voici les principes auxquels se tenir :

  • utilisez les balises HTML au bon endroit et à bon escient. Ne mettez pas un div (bloc neutre) si un p (paragraphe) ou un hn (titre hiérarchique) peuvent faire l’affaire. De même pour les listes, n’utilisez pas de div (bloc neutre) si une ul/ol (liste désordonnée, liste ordonnée) ou une dl (liste de définition) sont mieux adaptées.
  • nommez les classes (.classe) et les id (#id) en fonction de ce qu’ils représentent et non en fonction de l’apparence qu’ils devraient avoir.

Et c’est tout ! Cette petite touche de rigueur assurera une pérennité certaine dans vos développements. Sans compter la facilité à intégrer les microformats par la suite.

Et les microformats dans tout ça ?

Justement les microformats parlons-en. Si de prime abord sémantique et microformats peuvent paraitre sans grand rapport, ces concepts sont pourtant intimement liés. En utilisant les attributs class et rel (pour les liens hypertextes) dans une logique bien précise, on décrit le contenu et sa nature (titre de billet, auteur, date d’un évènement etc.).

Pour faire simple :

  • les microformats sont faciles à intégrer si le contenu est déjà bien structuré
  • les microformats aident à bien structurer le contenu : qu’il soit bien structuré ou pas, les recommandations vous guideront dans cette voie
  • les microformats sont déjà reconnus par des moteurs de recherche spécialisés (Technorati) et plus officieusement par les moteurs de recherche classiques (Google, Yahoo! etc.). Pas convaincu(e) ? Voici la liste non-exhaustive des sites comprenant les microformats.

Pour bien compléter ces paroles, je vous recommande cette excellente introduction aux microformats.

Intérêt supplémentaire des microformats

Ce qui est intéressant avec les microformats c’est que l’on peut les utiliser sans avoir derrière un site Web super hi-tech en Web 46.0 full Ajax. Une page HTML suffit. J’ai justement utilisé les microformats la première fois lorsque j’ai voulu refaire mon CV en me disant qu’en HTML ça serait sympa. Il existe fort heureusement un microformat hResume réutilisant lui-même les microformats hCard (carte de visite) et hCalendar (calendrier et évènements).
Outre l’aspect purement technique de cet exercice, ce CV me sert maintenant de carte de visite (en utilisant le service contacts de Technorati) en plus de pouvoir être réutilisé sur des sites de recherche d’emploi.

Mis à part une sémantisation de votre contenu, voici les bénéfices à retirer d’un microformatage :

  • extraction et republication du contenu à la volée : des services Web permettent d’aggréger une page pour la transformer en flux Atom voire même de créer des cartes de visites instantanément
  • les navigateurs Web intégreront eux aussi les microformats pour faciliter la navigation des utilisateurs : installez l’extension Operator pour Firefox, revenez sur cette page et améliorez votre expérience de navigation
  • les microformats sont au coeur de l’Internet de demain et c’est aujourd’hui qu’il faut y travailler

La sémantique, moteur des futures recherches sur Internet

Même si à l’heure actuelle on peut considérer que les microformats aident au référencement, ce n’est pas explicitement mentionné. Mais l’avenir est à la recherche sémantique afin d’affiner les résultats et de mieux répondre aux requêtes. C’est un énorme défi puisqu’entre indexer du contenu et comprendre ce qu’il dit, il y a tout un fossé. Cette recherche sémantique s’appliquera aussi bien au texte qu’aux ressources audio (musique, interview etc.) et vidéo.
Hakia s’intéresse à la recherche sémantique musicale tandis que d’un autre côté, la recherche sémantique est considérée comme étant une fonctionnalité nécessaire pour le futur de la recherche sur Internet.

Edition du 31/07 à 19h10 : Google Maps intègre désormais le microformat hCard.

Articles relatifs

Du bon usage de la sémantique : microformats et futur de la recherche sur Internet” a été publié le Mardi 31 juillet 2007 à 17:00.
Vous pouvez vous abonner à ses commentaires, déposer le vôtre et créer un rétrolien (depuis votre blog par exemple).

Catégories associées : Actualité, Internet, informatique, Standards du Web

Tags associés : , , , , , ,

1 rétroliens

  1. Ping : Critique du livre Transcender CSS : sublimez le design Web ! – La Case de l'Oncle Tom le Mardi 11 décembre 2007

5 commentaires : publier le mien ?

  1. Nicolas Krebs a dit le Mercredi 1 août 2007 :

    « les microformats sont au coeur de l’Internet de demain »

    Propagande.

  2. Oncle Tom a dit le Mercredi 1 août 2007 :

    On parlera plutôt d’anticipation (avec un enthousiasme non dissimulé). Avec ou sans les microformats, la sémantique est quoiqu’il arrive incontournable pour l’avenir. Technorati a suffisamment d’influence au sein des utilisateurs avancés pour mettre en place ce vecteur de travail.

    On en parle maintenant depuis 2 ans, c’est adopté par quelques sites “Web 2.0″ et de plus en plus les utilisent. Je ne blâme pas les gens qui n’y croient pas mais je suis certain que tout le monde a à y gagner en les utilisant ;-)

  3. Nicolas Krebs a dit le Jeudi 2 août 2007 :

    « On parlera plutôt d’anticipation »

    On parlera plutôt de buzz marketing.

    « avec un enthousiasme non dissimulé »

    Avec des intérêts personnels et commerciaux plus ou moins apparents.

    « Avec ou sans les microformats, la sémantique est quoiqu’il arrive incontournable pour l’avenir. »

    Ce sera sans les « microformats ».

    « Technorati a suffisamment d’influence au sein des utilisateurs avancés pour mettre en place ce vecteur de travail. »

    Technorati est un entreprise à but lucratif et sans grande influence.

    « On en parle maintenant depuis 2 ans, c’est adopté par quelques sites “Web 2.0″ »

    La preuve.

    « Je ne blâme pas les gens qui n’y croient pas »

    Encore heureux.

    « je suis certain que tout le monde a à y gagner en les utilisant »

    Auto-aveuglement.

    « ;-) »

    Il vaut mieux en sourire que les utiliser.

  4. Oncle Tom a dit le Jeudi 2 août 2007 :

    Pourquoi un tel refus et quels intérêts personnels ?

    Les microformats ont été en gestation pendant ces 2 dernières années, peu d’outils les ont intégré. Je ne dis pas qu’ils seront obligatoires à utiliser mais tant qu’à créer du contenu sémantique, pourquoi ne pas utiliser les microformats ? Ca n’apporte rien de mauvais mais juste davantage d’intéractivité. C’est pas comme si ça demandait un effort insurmontable ou des semaines de développement en plus.

  5. MrBean a dit le Lundi 5 novembre 2007 :

    Honte à moi, je n’étais aucunement au courant de l’existence du microformatage. Ce petit article est à mon avis très intéressant ! Depuis mon “initation” aux standards CSS et XHTML, j’ai toujours senti qu’ils n’étaient pas suffisants puisqu’ils ne concernent que la syntaxe de ces langages. Je sentais qu’il manquait une dimension à la programmation normative. Comme tu l’as mentionné, la sémantique fait partie de toute langue et ce depuis des lustres… heureux de voir que Technorati tente de réparer ce manque. C’est à mon avis quelque chose que les professeurs de programmation Web devraient au moins aborder. J’en parlerai au mien, en tout cas !

    Merci pour l’info. ;-) Je vais certainement intégrer ceci à mes layouts xhtml/css.

Publier un commentaire

Balises HTML autorisées : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

À propos de l'auteur

Pour me connaître un peu mieux, je mets à disposition plusieurs ressources professionnelles et personnelles :