Le Web sémantique avec Microdata

L’état des lieux du Web sémantique

Le HTML5 a introduit un Web très sémantique avec l’usage précis d’éléments qui permettent de structurer nos pages web. Nous savons, par exemple, que l’élément <blockquote> indique que son contenu est une citation, que l’élément <address> précise que le contenu attendu est une adresse... Nous avons aussi tous les éléments de structuration de la page que nous avons précédemment étudiés : <header>, <aside>, <main>, <footer>... Mais ces éléments manquent cruellement de précision comme le montre l’usage de l’élément <p> qui est un paragraphe de texte, mais c’est tout ce que nous savons. Rien ne nous indique plus précisément son contenu, est-ce une recette de cuisine ? Une fiche de lecture d’un livre ? Un descriptif d’un appareil ménagé ? Nous n’en savons rien.

Prenons un exemple précis :

<p>Bonjour je suis <strong>Christophe AUBRY</strong>, j'habite 
dans la région de <em>Nantes</em> et j'écris ce livre pour les 
<strong>Editions ENI</strong></p>

Nous avons trois mises en évidence avec les éléments <strong>...

L’objectif de Microdata

1. La norme et les schémas

Avec l’avènement du HTML5, Microdata permet d’ajouter des attributs afin d’avoir des éléments parfaitement définis d’un point de vue sémantique. Ainsi, les robots des moteurs de recherche savent parfaitement quel est le type de contenu des éléments HTML utilisés dans les pages web.

Comme toutes les spécifications HTML, Microdata est repris par le WHATWG. Utilisez cette URL pour suivre son évolution : https://html.spec.whatwg.org/multipage/microdata.html

L’objectif de Microdata est de créer un vocabulaire dédié à l’utilisation d’un type précis de donnée, comme des personnes, des événements, les lieux, des produits… Pour définir ce vocabulaire, vous allez pouvoir utiliser un schéma. Notez dès maintenant qu’il existe de nombreux vocabulaires, de nombreux schémas déjà disponibles sur le site de référence en la matière : Schema.org (https://schema.org).

Sur la page Schemas (https://schema.org/docs/schemas.html), vous pourrez utiliser des schémas déjà créés et vous inspirer de certains schémas proches de celui que vous souhaitez concevoir. Notez bien que l’ajout des attributs Microdata n’a strictement aucune influence...

Le schéma pour les personnes

1. Définir l’utilisation de Microdata avec itemscope

Nous allons aborder un premier exemple où il est question d’une personne avec du code HTML. Voici le code utilisé dans cet exemple :

<p>Bonjour, je suis <strong>Christophe AUBRY</strong>, je suis né 
le 10 juillet 1992 à Nantes. Je travaille régulièrement avec 
<em>Jérôme HABILLAUT</em> qui est responsable éditorial.</p>

Tout ce contenu n’est pas sémantiquement précis, en-dehors des deux éléments <strong> et <em> qui n’apportent pas réellement de précision sur leur contenu. Nous allons donc utiliser Microdata pour ajouter plus de sémantique à ce code.

La première étape consiste à ajouter l’attribut itemscope à l’élément parent, ici dans l’élément <p> :

<p itemscope>Bonjour, je suis <strong>Christophe AUBRY</strong>, 
je suis né le 10 juillet 1992 à Nantes. Je travaille régulièrement 
avec <em>Jérôme HABILLAUT</em> qui est responsable éditorial.</p>

Ainsi, tous les autres éléments inclus dans l’élément <p> hériteront du même schéma.

2. Indiquer...

Imbriquer des schémas

1. Pourquoi imbriquer des schémas ?

Il est courant d’avoir dans le même élément HTML plusieurs types de données sémantiques différentes.

Tout d’abord, ajoutons une petite phrase à la fin du paragraphe : "Nous travaillons sur le livre HTML5/CSS3 - Maîtriser les standards de la création de sites web, publié aux Éditions ENI".

<p itemscope itemtype="https://schema.org/Person">Bonjour, je suis 
<strong><span itemprop="givenName">Christophe</span> <span item 
prop="familyName">AUBRY</span></strong>, je suis né le  
<time datetime="1992-07-10" itemprop="birthDate">10 juillet 1992 
</time> à Nantes. Je travaille régulièrement avec <em><span  
itemprop="givenName">Jérôme</span> <span itemprop="familyName"> 
HABILLAUT</span></em> qui est <span itemprop="hasOccupation"> 
responsable éditorial</span>. Nous travaillons sur le livre 
HTML5/CSS3 - Maîtriser les standards de la création de sites web, 
publié aux Éditions ENI</p>

Avec cet ajout, il y a bien maintenant deux données sémantiques différentes : des personnes et un livre. Il faudra donc imbriquer deux schémas. Et nous pourrions, sur le même principe, ajouter un troisième schéma pour la ville, Nantes qui est nommée.

Notez bien que nativement, les schémas proposés sur le site de Schema.org sont imbriqués. Voici l’URL qui montre cette imbrication des schémas...