itemscope
L'attribut universel itemscope fonctionne généralement avec l'attribut itemtype afin d'indiquer qu'un bloc HTML contient un objet donné. itemscope crée l'objet et définit la portée de l'itemtype associé. Il est possible d'associer un attribut itemscope à n'importe quel élément HTML.
Les identifiants rattachés à itemscope
Un élément qui possède un attribut itemscope permet de définir un nouvel élément qui sera un groupe de paires de noms/valeurs. Les éléments qui ont un attribut itemscope et un attribut itemtype peuvent également définir un attribut id (à ne pas confondre avec itemid) pour identifier de façon unique l'élément sur le Web.
Syntaxe
Syntaxe formelle
itemscope
Exemple
Dans cet exemple, on a trois attributs itemscopes. Ces trois itemscopes définissent les portées respectives des itemtypes correspondants qui sont : Recipe, AggregateRating et NutritionInformation.
HTML
<div itemscope itemtype="https://schema.org/Recipe">
<h2 itemprop="name">Grandma's Holiday Apple Pie</h2>
<img itemprop="image" src="https://c1.staticflickr.com/1/30/42759561_8631e2f905_n.jpg" width="50" height="50"/>
<p>By <span itemprop="author" itemscope itemtype="https://schema.org/Person">
<span itemprop="name">Carol Smith</p></span>
</span>
<p>Published: <time datetime="2009-11-05" itemprop="datePublished">
November 5, 2009</p></time>
<span itemprop="description">This is my grandmother's apple pie recipe. I like to add a dash of nutmeg.<br></span>
<span itemprop="aggregateRating" itemscope itemtype="https://schema.org/AggregateRating">
<span itemprop="ratingValue">4.0</span> stars based on <span itemprop="reviewCount">35</span> reviews<br></span>
Prep time: <time datetime="PT30M" itemprop="prepTime">30 min<br></time>
Cook time: <time datetime="PT1H" itemprop="cookTime">1 hour<br></time>
Total time: <time datetime="PT1H30M" itemprop="totalTime">1 hour 30 min<br></time>
Yield: <span itemprop="recipeYield">1 9" pie (8 servings)<br></span>
<span itemprop="nutrition" itemscope itemtype="https://schema.org/NutritionInformation">
Serving size: <span itemprop="servingSize">1 medium slice<br></span>
Calories per serving: <span itemprop="calories">250 cal<br></span>
Fat per serving: <span itemprop="fatContent">12 g<br></span>
</span>
<p>Ingredients:<br>
<span itemprop="recipeIngredient">Thinly-sliced apples: 6 cups<br></span>
<span itemprop="recipeIngredient">White sugar: 3/4 cup<br></span>
... </p>
Directions: <br>
<div itemprop="recipeInstructions">
1. Cut and peel apples<br>
2. Mix sugar and cinnamon. Use additional sugar for tart apples. <br>
...
</div>
</div>
Structure des données
| itemscope | itemtype | Recipe | |
| itemprop | name: | Grandma's Holiday Apple Pie | |
| itemprop | image: | https://c1.staticflickr.com/1/30/42759561_8631e2f905_n.jpg | |
| itemprop | datePublished: | 2009-11-05 | |
| itemprop | description: | This is my grandmother's apple pie recipe. I like to add a dash of nutmeg. | |
| itemprop | prepTime: | PT30M | |
| itemprop | cookTime: | PT1H | |
| itemprop | totalTime: | PT1H30M | |
| itemprop | recipeYield: | 1 9" pie (8 servings) | |
| itemprop | recipeIngredient: | Thinly-sliced apples: 6 cups | |
| itemprop | recipeIngredient: | White sugar: 3/4 cup | |
| itemprop | recipeInstructions: | 1. Cut and peel apples 2. Mix sugar and cinnamon. Use additional sugar for tart apples . | |
| 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 medium slice | |
| itemprop | calories: | 250 cal | |
| itemprop | fatContent: | 12 g | |
Note : Pour extraire des micro-données d'un document HTML, vous pouvez utiliser l'outil d'extraction de Google pour les micro-données. Vous pouvez par exemple utiliser le document HTML précédent.
Spécifications
| Specification |
|---|
| HTML # attr-itemscope |
Compatibilité des navigateurs
Voir aussi
- Les différents attributs universels
- Les autres attributs universels relatifs aux microdonnées :