---
title: itemscope
slug: Web/HTML/Global_attributes/itemscope
tags:
  - Attribute
  - Global attribute
  - HTML
  - Microdata
  - Reference
translation_of: Web/HTML/Global_attributes/itemscope
---
<div>{{HTMLSidebar("Global_attributes")}}</div>

<p>L'<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes">atribut global</a> <code><strong>itemscope</strong></code> (en general) treballa juntament amb {{htmlattrxref ("itemtype")}} per especificar que el contingut HTML en un bloc es sobre un element en particular. <code>itemscope</code> crea l'element i defineix l'ambit del <code>itemtype</code> associat a ell. <code>itemtype</code> és un URL vàlid d'un vocabulari (com schema.org) que descriu l'element i el seu context de propietats. En els exemples següents el vocabulari utilitzat és de schema.org. Cada element HTML pot tenir un atribut <code>itemscope</code> especificat. Un element i<code>temscope</code> que no té un <code>itemtype</code> associat té una <code>itemref.</code></p>

<div class="note">
<p><strong>Nota:</strong> Més informació sobre els atributs <code>itemtype</code> es poden trobar a <a href="http://schema.org/Thing">http://schema.org/Thing</a></p>
</div>

<h3 id="Exemple_senzill">Exemple senzill</h3>

<h4 id="HTML">HTML</h4>

<pre class="brush:html">&lt;div itemscope itemtype ="http://schema.org/Movie"&gt;
  &lt;h1 itemprop="name"&gt;Avatar&lt;/h1&gt;
  &lt;span&gt;Director: &lt;span itemprop="director"&gt;James Cameron&lt;/span&gt; (born August 16, 1954)&lt;/span&gt;
  &lt;span itemprop="genre"&gt;Science fiction&lt;/span&gt;
  &lt;a href="https://youtu.be/0AY1XIkX7bY" itemprop="trailer"&gt;Trailer&lt;/a&gt;
&lt;/div&gt;
</pre>

<h4 id="sect1"> </h4>

<h4 id="Estructuració_de_les_dades">Estructuració de les dades</h4>

<table class="standard-table">
 <tbody>
  <tr>
   <td rowspan="6">itemscope</td>
   <td>Itemtype</td>
   <td colspan="2">Movie</td>
  </tr>
  <tr>
   <td>itemprop</td>
   <td>(itemprop name)</td>
   <td>(itemprop value)</td>
  </tr>
  <tr>
   <td>itemprop</td>
   <td>director</td>
   <td>James Cameron</td>
  </tr>
  <tr>
   <td>itemprop</td>
   <td>genre</td>
   <td>Science Fiction</td>
  </tr>
  <tr>
   <td>itemprop</td>
   <td>name</td>
   <td>Avatar</td>
  </tr>
  <tr>
   <td>itemprop</td>
   <td>https://youtu.be/0AY1XIkX7bY</td>
   <td>Trailer</td>
  </tr>
 </tbody>
</table>

<h3 id="itemscope_id's"><code>itemscope</code> id's</h3>

<p>Un element amb l'atribut <code>itemscope</code> especificat crea un nou element que consisteix en un grup de parells de nom-valor. Els elements amb un atribut <code>itemscope</code> i un atribut <code>itemtype</code> també poden tenir un atribut {{htmlattrxref ("id")}} especificat (no un itemid, cf. {{htmlattrxref ("itemref")}}), per donar un identificador global a l'element, de manera que pot estar relacionat amb altres elements de pàgines d'altres llocs a la web.</p>

<h3 id="Exemple">Exemple</h3>

<p>Hi ha tres <code>itemscope</code> en aquest exemple. Els tres <code>itemscope</code>, al seu torn, estableixen l'ambit corresponent de tres <code>itemtype</code>. Els tres  <code>itemtype</code> són <code>Recipe</code>, <code>AggregateRating</code> i <code>NutritionInformation</code> . Aquests <code>itemtype</code> són part de la estructura de dades de schema.org  per a una recepta.</p>

<pre class="brush: html">&lt;div itemscope itemtype="http://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="http://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="http://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="http://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="Resultats">Resultats</h3>

<h4 id="HTML_2">HTML</h4>

<p>{{EmbedLiveSample('Example', '500', '550', '', 'Web/HTML/Global_attributes/itemscope')}}</p>

<h4 id="Estructuració_de_les_dades_2">Estructuració de les dades</h4>

<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>https://c1.staticflickr.com/1/30/42759561_8631e2f905_n.jpg</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>1. Cut and peel apples 2. Mix sugar and cinnamon. Use additional sugar for tart apples .</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>Nota</strong>: Una eina molt útil per a l'extracció d'estructures de microdata d'HTML és Google's <a href="https://developers.google.com/structured-data/testing-tool/">Structured Data Testing Tool</a>. Intenteu-ho en el codi HTML que es mostra a dalt.</p>
</div>

<h2 id="Especificacions">Especificacions</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Especificació</th>
   <th scope="col">Estat</th>
   <th scope="col">Comentari</th>
  </tr>
  <tr>
   <td><code><a href="https://html.spec.whatwg.org/multipage/microdata.html#items">itemscope</a></code></td>
   <td> </td>
   <td>WG Nota - <span class="short_text" id="result_box" lang="ca"><span>Ja</span> <span>no s'està</span> <span>desenvolupant</span> <span>activament</span></span></td>
  </tr>
 </tbody>
</table>

<h2 id="Navegadors_compatibles">Navegadors compatibles</h2>

<p>{{CompatibilityTable}}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Característica</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Suport bàsic</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Característica</th>
   <th>Android</th>
   <th>Chrome for Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Suport bàsic</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<h2 id="Veure">Veure</h2>

<ul>
 <li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes">Altres atributs globals diferents</a></li>
 <li>Altres atributs globals relacionats amb microdata:
  <ul>
   <li>{{htmlattrxref("itemid")}}</li>
   <li>{{htmlattrxref("itemprop")}}</li>
   <li>{{htmlattrxref("itemref")}}</li>
   <li>{{htmlattrxref("itemscope")}}</li>
   <li>{{htmlattrxref("itemtype")}}</li>
  </ul>
 </li>
</ul>