HTML Itemprop

What is HTML Itemprop?

An item can have properties added by using the itemprop global attribute. A name-value pair makes up an item prop which is an attribute that can be supplied for any HTML element. A set that is composed of one or many key-value pairs is called an item, whereas each pair is referred to as the property. Entity value is related to the very broad spectrum of factors with <audio>, <embed>, <iframe>, <img>, <link>, <object>, <source>, <track>, and <video> being some of those. They can also be either strings or URLs.

Syntax:

<div itemscope itemtype="URL">

   <span itemprop="itemNumber1">name of the item</span>

   <span itemprop="itemNumber2">name of the item</span>

</div>

Examples

The example below displays the source for a group of items identified with item prop attributes, along with a table displaying the produced structured data.

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="../movies/avatar-theatrical-trailer.html" itemprop="trailer">

    Trailer      

  </a>

</div>

Properties

Properties can have values that are strings or URLs. A string value that is a URL can be expressed using other elements that link to or include external resources, such as the <a> element and its href property, the <img> element, and its src attribute, or other components.

Three properties with values that are strings

HTML

<div itemscope>

  <p>My name is <span itemprop="name">Neil</span>.</p>

  <p>My band is called <span itemprop="band">Four Parts Water</span>.</p>

  <p>I am <span itemprop="nationality">British</span>.</p>

</div>

One property, "image", whose value is a URL

HTML

<div itemscope>

  <img itemprop="image" src="google-logo.png" alt="Google" />

</div>

The value attribute of the data element can be used to display a string value that is difficult for a person to read and understand (such as a lengthy string of numbers and letters). The element's contents will then contain the version of the string value that is easier for people to understand.

An item with a property whose value is a product ID

The product name is used in place of the ID since it is more readable by humans.

HTML

<h1 itemscope>

  <data itemprop="product-id" value="9678AOU879">The Instigator 2000</data>

</h1>

The meter element and its value attribute can be used for numerical data.

A meter element

HTML

<div itemscope itemtype="http://schema.org/Product">

  <span itemprop="name">Panasonic White 60L Refrigerator</span>

  <img src="Panasonic-fridge-60l-white.jpg" alt="" />

  <div

    itemprop="aggregate rating"

    item scope

    itemtype="http://schema.org/AggregateRating">

    <meter itemprop="ratingValue" min="0" value="3.5" max="5">

      Rated 3.5/5

    </meter>

    (based on <span itemprop="review count">11</span>

    customer reviews)

  </div>

</div>

Likewise, the time element and its datetime field can be used for date- and time-related data.

An item with one property, "birthday", whose value is a date

HTML

<div itemscope>

  I was born on

  <time itemprop="birthday" datetime="1984-05-10">May 10th 1984</time>.

</div>

With the itemscope attribute applied to the element defining the property, properties can also be collections of name-value pairs. Every value is a collection of name-value pairs (i.e., an item) or a string.

An outer item representing a person, and an inner one representing a band

HTML

<div itemscope>

  <p>Name: <span itemprop="name">Amanda</span></p>

  <p>

    Band:

    <span itemprop="band" itemscope>

      <span itemprop="name">Jazz Band</span>

      (<span itemprop="size">12</span> players)

    </span>

  </p>

</div>

The outer item above presents the two properties "name" and "band". The "band" is a separate entity with the attributes "name" and "size," and the "name" is "Amanda." The band is called "Jazz Band" and is a size twelve. A top-level microdata item is the outer item in this example. Top-level microdata items are those that are not a part of any other series.

All the properties separated from their items

The only difference between this example and the last one is that all properties are now independent of their items.

The outcome is the same as it was in the first example. The "name" property of the first item is set to "Amanda," and the "band" property is set to some other item. Two more characteristics are assigned to that second item: "name," which is set to "Jazz Band," and "size," which is set to "12."

An item can have multiple properties with distinct values and the same name.

HTML

<div itemscope id="amanda" itemref="a b"></div>

<p id="a">Name: <span itemprop="name">Amanda</span></p>

<div id="b" itemprop="band" itemscope itemref="c"></div>

<div id="c">

  <p>Band: <span itemprop="name">Jazz Band</span></p>

  <p>Size: <span itemprop="size">12</span> players</p>

</div>

Ice cream with two flavors

HTML

<div itemscope>

  <p>Flavors in my favorite ice cream:</p>

  <ul>

    <li itemprop="flavor">Lemon sorbet</li>

    <li itemprop="flavor">Apricot sorbet</li>

  </ul>

</div>

This produces a property object with two values, "Lemon sorbet" and "Apricot sorbet," and both with the name "flavor."

If several attributes are introduced by an element simultaneously and some of the properties have the same value, duplication can be avoided by doing so.

An item with two properties, "favorite color" and "favorite fruit", both set to the value "orange."

HTML

<div itemscope>

  <span

    itemprop="favorite-color

    favorite-fruit"

    >orange

  </span>

</div>

The same structured data is marked up in two different ways

The following two examples have no semantic distinction

There is a figure with a caption in each, and there is an item with a name-value pair with the name "name" and the value "The Castle" that is unconnected to the figure. There is only one difference: the item will be added to the drag-and-drop data if the user drags the figcaption out of the document. The item's associated image will not be displayed.

HTML

<figure>

  <img src="castle.jpeg" />

  <figcaption>

    <span itemscope><span itemprop="name">The Castle</span></span> (1986)

  </figcaption>

</figure>

HTML

<span itemscope><meta itemprop="name" content="The Castle" /></span>

<figure>

  <img src="castle.jpeg" />

  <figcaption>The Castle (1986)</figcaption>

</figure>

Names and Values

An unordered collection of distinct tokens that represent name-value pairs and are case-sensitive is called a property. At least one token must be present in the property value. Every data cell is a token in the example below.

Names Examples

	itemprop name	itemprop value
itemprop	country	ireland
itemprop	Option	2
itemprop	https://www.flickr.com/photos/nlireland/6992065114/	Ring of Kerry
itemprop	img	https://www.flickr.com/photos/nlireland/6992065114/
itemprop	website	flickr
itemprop	(token)	(token)

Strings or URLs can be used as tokens. A URL-based object is referred to as a typed item. If not, it's just a string. A colon or a period cannot be found in a string.

• If the item is inputted, it needs to be one of the following:
• A defined property name;
• A legitimate URL that points to the vocabulary definition; or
• A legitimate URL used as the name of a proprietary item property (one that's not specified in a public specification) or
• If the item isn't typed, it needs to be:
• A string that is used as a proprietary item property name (again, one not declared in a public specification) and has no "." (U+002E FULL STOP) or ":" characters (U+003A COLON).

Values

A name-value pair's property value is as follows for the first matching case in the list below:

• If an itemscope attribute is present on the element

The thing that the element creates is the value.

• If the component is a meta-component

The value corresponds to the content attribute value of the element.

• If the component is a track, video, audio, embed, iframe, image, or source

The value is the URL string produced when the element's src attribute value is parsed about the node document (a component of the Microdata DOM API) when the attribute is set.

• If the element is an area, a, or link

The value is the URL string that emerges from processing the element's href property value about the element's node document when the attribute is set.

• If the element is an object element

The value is the URL string that emerges from processing the element's data attribute value about the element's node document when the attribute is set.

• If the component is a data component

The value is the value assigned to the element's value attribute.

• If it is a meter element

The value is the value assigned to the element's value attribute.

• If the element is a temporal component

The value is the datetime value of the element.

Otherwise

• The text content of the element is its value.

A URL property element must be used to define a property if its value is a URL. The elements that make up the URL property are the a, area, audio, embed, iframe, img, link, object, source, track, and video components.

Name order

While names are not sorted against one another, they are in relative order if a given name has more than one value.

In the example below, the values of "1" and "2" are assigned to the "a" property, but it does not matter if the "a" property comes before the "b" property.

HTML

<div itemscope>

  <p itemprop="a">1</p>

  <p itemprop="a">2</p>

  <p itemprop="b">test</p>

</div>

Here are some similar examples:

HTML

<div itemscope>

  <p itemprop="b">test</p>

  <p itemprop="a">1</p>

  <p itemprop="a">2</p>

</div>

HTML

<div itemscope>

  <p itemprop="a">1</p>

  <p itemprop="b">test</p>

  <p itemprop="a">2</p>

</div>

HTML

<div id="x">

  <p itemprop="a">1</p>

</div>

<div itemscope itemref="x">

  <p itemprop="b">test</p>

  <p itemprop="a">2</p>

</div>

Supported Browsers

Safari

Google Chrome

Microsoft Edge 12 and above

Firefox

Opera