The global attribute 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
has an itemref
.
Note: More about itemtype
attributes can be found at http://schema.org/Thing
<div itemscope itemtype ="http://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>
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'sAn 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
, cf. itemref
), to give a global identifier for the item, so that it can be related to other items on pages elsewhere on the Web.
There are three itemscope
in this example. The three itemscope
, in turn, set the scope of three corresponding itemtype
. The three itemtype
are Recipe
, AggregateRating
, and NutritionInformation
. These itemtype
are part of the schema.org structured data for a receipe.
<div itemscope itemtype="http://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="http://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="http://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="http://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>
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.
Specification | Status | Comment |
---|---|---|
itemscope | WG Note - No longer being actively developed |
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) |
Feature | Android | Chrome for Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Basic support | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) |
© 2005–2017 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/itemscope