Please note, this is a STATIC archive of website developer.mozilla.org from 03 Nov 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

Revision 1015495 of itemscope

  • Revision slug: Web/HTML/Global_attributes/itemscope
  • Revision title: itemscope
  • Revision id: 1015495
  • Created:
  • Creator: duncanmcdonald
  • Is current revision? No
  • Comment Cleaned up table formatting
Tags: 

Revision Content

Summary

Itemscope (usually) works along with itemtype to specify that the HTML contained in a block is about a particular item. itemscope creates the Item and defines the scope of the itemtype associated with it. itemtype is a valid URL of a vocabulary (such as schema.org) that describes the item and its properties context. In the examples below the vocabulary used is from schema.org. Every HTML element may have an itemscope attribute specified. An itemscope element that doesn't have an associated itemtype will have an itemref.

Note: More about itemtype attributes can be found at https://schema.org/Thing

Simple example

HTML

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

 

Structured data

itemscope Itemtype Movie
itemprop (itemprop name) (itemprop value)
itemprop director James Cameron
itemprop genre Science fiction
itemprop name Avatar
itemprop https://youtu.be/0AY1XIkX7bY Trailer

Itemscope id's

An element with the itemscope attribute specified creates a new item that consists of a group of name-value pairs. Elements with an itemscope attribute and an itemtype attribute may also have an id attribute specified (not an itemid, see itemref), to give a global identifier for the item, so that it can be related to other items on pages elsewhere on the Web.

Example

There are three itemscopes in this example. The three itemscopes in turn set the scope of three corresponding itemtypes. The three itemtypes are: Recipe, AggregateRating, and NutritionInformation. These itemtypes are part of the schema.org structured data for a receipe.

<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>

Results

HTML

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

Structured data

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: A handy tool for extracting microdata structures from HTML is Google's Structured Data Testing Tool. Try it on the HTML shown above.

SpecificationEditEdit

Specification Status
itemscope WG Note - No longer being actively developed

Revision Source

 
<h2 id="Summary">Summary</h2>

<p><strong>Itemscope </strong>(usually) works along with <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/itemtype">itemtype </a>to specify that the HTML contained in a block is about a particular item. itemscope creates the Item and defines the scope of the itemtype associated with it.&nbsp;itemtype is a valid URL of a vocabulary (such as <a href="https://schema.org/">schema.org</a>) that describes the item and its properties context. In the examples below the vocabulary used is from <a href="www.schema.org">schema.org. </a>Every HTML element may have an itemscope attribute specified. An itemscope element that doesn't have an associated itemtype will have an itemref.</p>

<div class="note">
<p><strong>Note:</strong> More about itemtype attributes can be found at <a href="https://schema.org/Thing">https://schema.org/Thing</a></p>
</div>

<h3 id="Simple_example">Simple example</h3>

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

<pre class="line-numbers  language-html" style="font-family: Courier, monospace; font-size: 14.4px; width: auto; padding: 0px 5px 2px 10px; margin: 0.5em 0px 0px 50px; text-align: left; overflow: auto; color: rgb(58, 73, 86); font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 19.2px; text-indent: 0px; text-transform: none; background: rgb(225, 225, 225);">
&lt;div itemscope itemtype ="https://schema.org/Movie"&gt;
&nbsp; &lt;h1 itemprop="name"&gt;Avatar&lt;/h1&gt;
&nbsp; &lt;span&gt;Director: &lt;span itemprop="director"&gt;James Cameron&lt;/span&gt; (born August 16, 1954)&lt;/span&gt;
&nbsp; &lt;span itemprop="genre"&gt;Science fiction&lt;/span&gt;
&nbsp; &lt;a href="https://youtu.be/0AY1XIkX7bY" itemprop="trailer"&gt;Trailer&lt;/a&gt;
&lt;/div&gt;
</pre>

<h4 id="sect1">&nbsp;</h4>

<h4 id="Structured_data">Structured data</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">Itemscope id's</h3>

<p>An element with the itemscope attribute specified creates a new item that consists of a group of name-value pairs. Elements with an itemscope attribute and an itemtype attribute may also have an id attribute specified (not an itemid, see <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/itemref">itemref</a>), to give a global identifier for the item, so that it can be related to other items on pages elsewhere on the Web.</p>

<h3 id="Example">Example</h3>

<p>There are three itemscopes in this example. The three itemscopes in turn set the scope of three corresponding itemtypes. The three itemtypes are: Recipe, <span>AggregateRating, and NutritionInformation. These itemtypes are part of the </span><a href="www.schema.org">schema.org</a> structured data for a receipe.</p>

<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;
&nbsp; &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="Results">Results</h3>

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

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

<h4 id="Structured_data_2">Structured data</h4>

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

<div class="note">
<p><strong>Note</strong>: A handy tool for extracting microdata structures from HTML is Google's<a href="https://developers.google.com/structured-data/testing-tool/"> Structured Data Testing Tool</a>. Try it on the HTML shown above.</p>
</div>

<article id="wikiArticle">
<h2 id="SpecificationEditEdit">Specification<a class="only-icon button section-edit new" href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-alternates$edit#Specifications"><span>Edit</span></a><a class="only-icon button section-edit new" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/itemid$edit#SpecificationsEdit"><span>Edit</span></a></h2>

<table class="standard-table" style="height:105px; width:490px">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td style="text-align: left; vertical-align: middle;"><a class="external-icon external" href="https://html.spec.whatwg.org/multipage/microdata.html#items">itemscope</a></td>
   <td style="text-align: left; vertical-align: middle; white-space: nowrap;">WG Note - No longer being actively developed</td>
  </tr>
 </tbody>
</table>
</article>
Revert to this revision