path: root/files/fr/web/html/global_attributes/itemscope/index.html

---
title: itemscope
slug: Web/HTML/Global_attributes/itemscope
tags:
  - Attribut
  - Attribut universel
  - HTML
  - Micro-données
  - Microdata
  - Reference
translation_of: Web/HTML/Global_attributes/itemscope
original_slug: Web/HTML/Attributs_universels/itemscope
---
<div>{{HTMLSidebar("Global_attributes")}}</div>

<p>L'<a href="/fr/docs/Web/HTML/Attributs_universels">attribut universel</a> <strong><code>itemscope</code> </strong>fonctionne généralement avec l'attribut <code>itemtype</code> afin d' indiquer qu'un bloc HTML contient un objet donné. <code>itemscope</code> crée l'objet et définit la portée de l'<code>itemtype</code> associé. Il est possible d'associer un attribut <code>itemscope</code> à n'importe quel élément HTML.</p>

<h3 id="Les_identifiants_rattachés_à_itemscope">Les identifiants rattachés à <code>itemscope</code></h3>

<p>Un élément qui possède un attribut <code>itemscope</code> permet de définir un nouvel élément qui sera un groupe de paires de noms/valeurs. Les éléments qui ont un attribut <code>itemscope</code> et un attribut <code>itemtype</code> peuvent également définir un attribut <code>id</code> (à ne pas confondre avec <code>itemid)</code> pour identifier de façon unique l'élément sur le Web.</p>

<h2 id="Syntaxe">Syntaxe</h2>

<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>

<pre class="syntaxbox">itemscope</pre>

<h2 id="Exemple">Exemple</h2>

<p>Dans cet exemple, on a trois attributs <code>itemscopes</code>. Ces trois <code>itemscopes</code> définissent les portées respectives des <code>itemtypes</code> correspondants qui sont : Recipe, AggregateRating et NutritionInformation.</p>

<h3 id="HTML">HTML</h3>

<pre class="brush: html">&lt;div itemscope itemtype="https://schema.org/Recipe"&gt;
&lt;h2 itemprop="name"&gt;Grandma's Holiday Apple Pie&lt;/h2&gt;
&lt;img itemprop="image" src="https://c1.staticflickr.com/1/30/42759561_8631e2f905_n.jpg" width="50" height="50"/&gt;
&lt;p&gt;By &lt;span itemprop="author" itemscope itemtype="https://schema.org/Person"&gt;
&lt;span itemprop="name"&gt;Carol Smith&lt;/p&gt;&lt;/span&gt;
&lt;/span&gt;
&lt;p&gt;Published: &lt;time datetime="2009-11-05" itemprop="datePublished"&gt;
November 5, 2009&lt;/p&gt;&lt;/time&gt;
&lt;span itemprop="description"&gt;This is my grandmother's apple pie recipe. I like to add a dash of nutmeg.&lt;br&gt;&lt;/span&gt;
 &lt;span itemprop="aggregateRating" itemscope itemtype="https://schema.org/AggregateRating"&gt;
 &lt;span itemprop="ratingValue"&gt;4.0&lt;/span&gt; stars based on &lt;span itemprop="reviewCount"&gt;35&lt;/span&gt; reviews&lt;br&gt;&lt;/span&gt;
Prep time: &lt;time datetime="PT30M" itemprop="prepTime"&gt;30 min&lt;br&gt;&lt;/time&gt;
 Cook time: &lt;time datetime="PT1H" itemprop="cookTime"&gt;1 hour&lt;br&gt;&lt;/time&gt;
 Total time: &lt;time datetime="PT1H30M" itemprop="totalTime"&gt;1 hour 30 min&lt;br&gt;&lt;/time&gt;
 Yield: &lt;span itemprop="recipeYield"&gt;1 9" pie (8 servings)&lt;br&gt;&lt;/span&gt;
 &lt;span itemprop="nutrition" itemscope itemtype="https://schema.org/NutritionInformation"&gt;
 Serving size: &lt;span itemprop="servingSize"&gt;1 medium slice&lt;br&gt;&lt;/span&gt;
 Calories per serving: &lt;span itemprop="calories"&gt;250 cal&lt;br&gt;&lt;/span&gt;
 Fat per serving: &lt;span itemprop="fatContent"&gt;12 g&lt;br&gt;&lt;/span&gt;
&lt;/span&gt;
&lt;p&gt;Ingredients:&lt;br&gt;
  &lt;span itemprop="recipeIngredient"&gt;Thinly-sliced apples: 6 cups&lt;br&gt;&lt;/span&gt;
  &lt;span itemprop="recipeIngredient"&gt;White sugar: 3/4 cup&lt;br&gt;&lt;/span&gt;
 ... &lt;/p&gt;

Directions: &lt;br&gt;
  &lt;div itemprop="recipeInstructions"&gt;
    1. Cut and peel apples&lt;br&gt;
    2. Mix sugar and cinnamon. Use additional sugar for tart apples. &lt;br&gt;
    ...
  &lt;/div&gt;
&lt;/div&gt; </pre>

<h3 id="Structure_des_données">Structure des données</h3>

<table class="standard-table">
 <tbody>
  <tr>
   <td colspan="1" rowspan="14">itemscope</td>
   <td>itemtype</td>
   <td colspan="2" rowspan="1">Recipe</td>
  </tr>
  <tr>
   <td>itemprop</td>
   <td>name:</td>
   <td>Grandma's Holiday Apple Pie</td>
  </tr>
  <tr>
   <td>itemprop</td>
   <td>image:</td>
   <td>
    <div class="jyrRxf-eEDwDf jcd3Mb">https://c1.staticflickr.com/1/30/42759561_8631e2f905_n.jpg</div>
   </td>
  </tr>
  <tr>
   <td>itemprop</td>
   <td>datePublished:</td>
   <td>2009-11-05</td>
  </tr>
  <tr>
   <td>itemprop</td>
   <td>description:</td>
   <td>This is my grandmother's apple pie recipe. I like to add a dash of nutmeg.</td>
  </tr>
  <tr>
   <td>itemprop</td>
   <td>prepTime:</td>
   <td>PT30M</td>
  </tr>
  <tr>
   <td>itemprop</td>
   <td>cookTime:</td>
   <td>PT1H</td>
  </tr>
  <tr>
   <td>itemprop</td>
   <td>totalTime:</td>
   <td>PT1H30M</td>
  </tr>
  <tr>
   <td>itemprop</td>
   <td>recipeYield:</td>
   <td>1 9" pie (8 servings)</td>
  </tr>
  <tr>
   <td>itemprop</td>
   <td>recipeIngredient:</td>
   <td>Thinly-sliced apples: 6 cups</td>
  </tr>
  <tr>
   <td>itemprop</td>
   <td>recipeIngredient:</td>
   <td>White sugar: 3/4 cup</td>
  </tr>
  <tr>
   <td>itemprop</td>
   <td>recipeInstructions:</td>
   <td>
    <div class="jyrRxf-eEDwDf jcd3Mb">1. Cut and peel apples 2. Mix sugar and cinnamon. Use additional sugar for tart apples .</div>
   </td>
  </tr>
  <tr>
   <td>itemprop</td>
   <td colspan="2" rowspan="1">author [Person]:</td>
  </tr>
  <tr>
   <td>itemprop</td>
   <td>name:</td>
   <td>Carol Smith</td>
  </tr>
  <tr>
   <td colspan="1" rowspan="3">itemscope</td>
   <td>itemprop[itemtype]</td>
   <td colspan="2" rowspan="1">aggregateRating [AggregateRating]:</td>
  </tr>
  <tr>
   <td>itemprop</td>
   <td>ratingValue:</td>
   <td>4.0</td>
  </tr>
  <tr>
   <td>itemprop</td>
   <td>reviewCount:</td>
   <td>35</td>
  </tr>
  <tr>
   <td colspan="1" rowspan="4">itemscope</td>
   <td>itemprop[itemtype]</td>
   <td colspan="2" rowspan="1">nutrition [NutritionInformation]:</td>
  </tr>
  <tr>
   <td>itemprop</td>
   <td>servingSize:</td>
   <td>1 medium slice</td>
  </tr>
  <tr>
   <td>itemprop</td>
   <td>calories:</td>
   <td>250 cal</td>
  </tr>
  <tr>
   <td>itemprop</td>
   <td>fatContent:</td>
   <td>12 g</td>
  </tr>
 </tbody>
</table>

<div class="note">
<p><strong>Note</strong> : Pour extraire des micro-données d'un document HTML, vous pouvez utiliser <a href="https://developers.google.com/structured-data/testing-tool/">l'outil d'extraction de Google pour les micro-données.</a> Vous pouvez par exemple utiliser le document HTML précédent.</p>
</div>

<h2 id="Spécifications">Spécifications</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Spécification</th>
   <th scope="col">État</th>
   <th scope="col">Commentaires</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('HTML Microdata', "#dfn-itemscope", "itemscope")}}</td>
   <td>{{Spec2('HTML Microdata')}}</td>
   <td> </td>
  </tr>
  <tr>
   <td>{{SpecName('HTML WHATWG', "microdata.html#attr-itemscope", "itemscope")}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td> </td>
  </tr>
 </tbody>
</table>

<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>

<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>

<p>{{Compat("html.global_attributes.itemscope")}}</p>

<h2 id="Voir_aussi">Voir aussi</h2>

<ul>
 <li><a href="/fr/docs/Web/HTML/Attributs_universels">Les différents attributs universels</a></li>
 <li>Les autres attributs universels relatifs aux microdonnées :
  <ul>
   <li>{{htmlattrxref("itemid")}}</li>
   <li>{{htmlattrxref("itemprop")}}</li>
   <li>{{htmlattrxref("itemref")}}</li>
   <li>{{htmlattrxref("itemscope")}}</li>
   <li>{{htmlattrxref("itemtype")}}</li>
  </ul>
 </li>
</ul>