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

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