MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

itemscope

This translation is incomplete. Please help translate this article from English.

L'atribut global itemscope (en general) treballa juntament amb itemtype per especificar que el contingut HTML en un bloc es sobre un element en particular. itemscope crea l'element i defineix l'ambit del itemtype associat a ell. itemtype é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 itemscope especificat. Un element itemscope que no té un itemtype associat té una itemref.

Nota: Més informació sobre els atributs itemtype es poden trobar a http://schema.org/Thing

Exemple senzill

HTML

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

 

Estructuració de les dades

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

Un element amb l'atribut itemscope especificat crea un nou element que consisteix en un grup de parells de nom-valor. Els elements amb un atribut itemscope i un atribut itemtype també poden tenir un atribut id especificat (no un itemid, cf. 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.

Exemple

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

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

Resultats

HTML

Estructuració de les dades

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

Nota: Una eina molt útil per a l'extracció d'estructures de microdata d'HTML és Google's Structured Data Testing Tool. Intenteu-ho en el codi HTML que es mostra a dalt.

Especificacions

Especificació Estat Comentari
itemscope   WG Nota - Ja no s'està desenvolupant activament

Característica Chrome Firefox (Gecko) Internet Explorer Opera Safari
Suport bàsic (Yes) (Yes) (Yes) (Yes) (Yes)
Característica Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Suport bàsic (Yes) (Yes) (Yes) (Yes) (Yes) (Yes)

Veure

Document Tags and Contributors

 Contributors to this page: Legioinvicta
 Last updated by: Legioinvicta,