itemscope

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.

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

Example

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

Structured data

Specifications

Browser compatibility

See also

• Other different global attributes
• Other, microdata related, global attributes:
  • itemid
  • itemprop
  • itemref
  • itemscope
  • itemtype