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 Standard # attr-itemscope |
Compatibilité des navigateurs
Voir aussi
-
Les autres attributs universels relatifs aux microdonnées :