这篇文章需要技术复核。如何帮忙。
这篇文章需要文法复核。如何帮忙。
我们的志愿者还没有将这篇文章翻译为 中文 (简体)。加入我们帮助完成翻译!
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 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
, 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
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.
Specifications
Specification | Status | Comment |
---|---|---|
itemscope |
WG Note - No longer being actively developed |
Browser compatibility
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) |