Attribut HTML universel : itemscope
L'attribut universel itemscope est un booléen qui définit la portée des métadonnées associées. La spécification de l'attribut itemscope pour un élément crée un nouvel élément, ce qui entraîne un certain nombre de paires nom-valeur associées à l'élément.
Un attribut relatif, itemtype, est utilisé pour définir l'URL valide d'un vocabulaire (comme schema.org (angl.)) qui décrit l'élément et le contexte de ses propriétés. Dans chacun des exemples suivants, le vocabulaire provient de schema.org (angl.).
Chaque élément HTML peut avoir un attribut itemscope défini. Un élément itemscope qui n'a pas d'itemtype associé doit avoir un itemref associé.
Note :
En savoir plus sur les attributs itemtype sur https://schema.org/Thing
Notes d'utilisation
Attributs id pour itemscope
Lorsque vous définissez l'attribut itemscope pour un élément, un nouvel élément est créé. L'élément se compose d'un groupe de paires nom-valeur. Pour les éléments avec un attribut itemscope et un attribut itemtype, vous pouvez également définir un attribut id. Vous pouvez utiliser l'attribut id pour définir un identifiant global pour le nouvel élément. Un identifiant global permet à l'élément de se rapporter à d'autres éléments trouvés sur des pages à travers le Web.
Exemples
Représenter des données structurées pour un film
L'exemple suivant définit l'attribut itemtype comme "http://schema.org/Movie" et définit quatre attributs itemprop associés.
| itemscope | Itemtype | Film | |
| itemprop | (itemprop name) | (itemprop value) | |
| itemprop | director | James Cameron | |
| itemprop | genre | Science-fiction | |
| itemprop | name | Avatar | |
| itemprop | Bande-annonce | https://youtu.be/0AY1XIkX7bY | |
<div itemscope itemtype="https://schema.org/Movie">
<h1 itemprop="name">Avatar</h1>
<span>
Réalisateur : <span itemprop="director">James Cameron</span> (né le 16
août 1954) 1954)
</span>
<span itemprop="genre">Science-fiction</span>
<a href="https://youtu.be/0AY1XIkX7bY" itemprop="trailer">Bande-annonce</a>
</div>
Représenter des données structurées pour une recette
Il y a quatre attributs itemscope dans l'exemple suivant. Chaque attribut itemscope définit la portée de son attribut itemtype correspondant. Les itemtype, Recipe, AggregateRating et NutritionInformation dans l'exemple suivant font partie des données structurées de schema.org (angl.) pour une recette, comme défini par le premier itemtype, http://schema.org/Recipe.
| itemscope | itemtype | Recipe | |
| itemprop | name | La tarte aux pommes de grand-mère pour les fêtes | |
| itemprop | image | https://c1.staticflickr.com/1/30/42759561_8631e2f905_n.jpg | |
| itemprop | datePublished | 2022-11-05 | |
| itemprop | description | Voici la recette de la tarte aux pommes de ma grand-mère. J'aime ajouter une pincée de muscade. | |
| itemprop | prepTime | PT30M | |
| itemprop | cookTime | PT1H | |
| itemprop | totalTime | PT1H30M | |
| itemprop | recipeYield | 1 tarte de 9" (8 portions) | |
| itemprop | recipeIngredient | Pommes finement tranchées : 6 tasses | |
| itemprop | recipeIngredient | Sucre blanc : 3/4 tasse | |
| itemprop | recipeInstructions | 1. Éplucher et couper les pommes 2. Mélanger le sucre et la cannelle. Utiliser du sucre supplémentaire pour les pommes acides. | |
| itemprop | author [Person] | ||
| itemprop | name | Carol Smith | |
| itemscope | itemprop[itemtype] | aggregateRating [AggregateRating] | |
| itemprop | ratingValue | 4.0 | |
| itemprop | reviewCount | 35 | |
| itemscope | itemprop[itemtype] | nutrition [NutritionInformation] | |
| itemprop | servingSize | 1 tranche moyenne | |
| itemprop | calories | 250 cal | |
| itemprop | fatContent | 12 g | |
Note : Un outil pratique pour extraire les structures de microdonnées à partir de HTML est l'outil Rich Results Testing Tool (angl.) de Google. Essayez-le sur le HTML montré ici.
HTML
<div itemscope itemtype="https://schema.org/Recipe">
<h2 itemprop="name">La tarte aux pommes de grand-mère pour les fêtes</h2>
<img
itemprop="image"
src="https://c1.staticflickr.com/1/30/42759561_8631e2f905_n.jpg"
width="50"
height="50" />
<p>
Par
<span itemprop="author" itemscope itemtype="https://schema.org/Person">
<span itemprop="name">Carol Smith</span>
</span>
</p>
<p>
Publié le :
<time datetime="2022-11-05" itemprop="datePublished">
5 novembre 2022
</time>
</p>
<span itemprop="description">
Voici la recette de la tarte aux pommes de ma grand-mère. J'aime ajouter une
pincée de muscade.
</span>
<br />
<span
itemprop="aggregateRating"
itemscope
itemtype="https://schema.org/AggregateRating">
<span itemprop="ratingValue">4.0</span> étoiles sur la base de
<span itemprop="reviewCount">35</span> avis
</span>
<br />
Temps de préparation :
<time datetime="PT30M" itemprop="prepTime">30 min</time>
<br />
Temps de cuisson :
<time datetime="PT1H" itemprop="cookTime">1 heure</time>
<br />
Temps total :
<time datetime="PT1H30M" itemprop="totalTime">1 heure 30 min</time>
<br />
Résultat : <span itemprop="recipeYield">1 tarte de 9" (8 portions)</span>
<br />
<span
itemprop="nutrition"
itemscope
itemtype="https://schema.org/NutritionInformation">
Taille de portion :
<span itemprop="servingSize">1 tranche moyenne</span><br />
Calories par portion : <span itemprop="calories">250 cal</span><br />
Lipides par portion : <span itemprop="fatContent">12 g</span><br />
</span>
<p>
Ingrédients :<br />
<span itemprop="recipeIngredient"
>Pommes finement tranchées : 6 tasses<br
/></span>
<span itemprop="recipeIngredient">Sucre blanc : 3/4 tasse<br /></span>
…
</p>
Directions :<br />
<div itemprop="recipeInstructions">
1. Éplucher et couper les pommes<br />
2. Mélanger le sucre et la cannelle. Utiliser du sucre supplémentaire pour
les pommes acides.<br />
…
</div>
</div>
Résultat
Spécifications
| Specification |
|---|
| HTML # attr-itemscope |
Voir aussi
- Tous les attributs universels
- Les autres attributs universels relatifs aux microdonnées :