HTML Itemscope
Introduction
The global attribute item scope, which is boolean, establishes the extent of related metadata. When its itemscope attribute is specified, an element can have several name-value pairs associated with it, creating a new item.
A vocabulary (like schema.org) describes the item and its properties context. It can be found at the valid URL specified by the related attribute itemtype. All of the language used in the following examples is taken from schema.org.
An itemscope property can be specified for any HTML element. If an itemscope element doesn't have a corresponding item type, it needs to have an associated itemref.
The HTML itemscope property collaborates with item types to ensure that the HTML in a block is about a certain item. Any element with its itemscope property defined generates a new item, which leads to several name-value pairs being connected to the element.
Itemscope Id Attributes
A new item is created for each element for which the itemscope property is specified. The item consists of a collection of name-value pairs. An id attribute can also be specified for elements that include itemscope and itemtype attributes. The new item can have a global identification set using the id attribute. An item's ability to relate to other items on pages throughout the Web is made possible by its global identifier.
Syntax
<element itemscope></element>
Examples
Example 1
The itemscope attribute in HTML is demonstrated in the example below.
<!DOCTYPE html>
<html>
<body>
<center>
<h1 style="color:red;">
Javatpoint
</h1>
<strong>HTML itemscope Attribute</strong>
</center>
<div itemscope itemtype= "https://www.youtube.com/channel/UC0RhatS1pyxInC00YKjjBqQ">
<h1 itemprop="name">Courses</h1>
<span>Javatpoint:
<span itemprop="topic">A Computer</span>
Science portal
</span>
<span itemprop="stack">Web Developer</span>
<a href= "https://www.youtube.com/watch?v=Bjed-kudYkU"
itemprop="full_course">Visit Courses</a>
</div>
</body>
</html>
Structured data: The data from the previous example is displayed in the following table.
| itemscope | item type | channel | |
| itemprop | (itemprop name) | (itemprop value) | |
| itemprop | topic | A Computer | |
| itemprop | stack | Web Developer | |
| itemprop | name | Courses | |
| itemprop | full_course | Visit Courses | |
Example 2:
<!DOCTYPE html>
<html>
<body>
<center>
<h1 style="color:red;">
Javatpoint
</h1>
<strong>HTML itemscope Attribute</strong>
</center>
<div itemscope itemtype=
"https://www.youtube.com/channel/UC0RhatS1pyxInC00YKjjBqQ">
<h1 itemprop="name">DSA Courses</h1>
<span>Javatpoint:
<span itemprop="topic">A Computer</span>
Science portal
</span>
<br>
<ul>
<li>
<span itemprop="stack">
Competitive Programming
</span>
<a href=
"https://www.javatpoint.org/courses/competitive-programming-live?utm_source=gfg-article&utm_medium=Q1-2023&utm_campaign=competitive-programming-live"
itemprop="full_course">Visit Courses</a>
</li>
<li><span itemprop="stack">
DataStructure & Algorithm
</span>
<a href=
"https://www.javatpoint.org/courses/dsa-self-paced?utm_source=gfg-article&utm_medium=Q1-2023&utm_campaign=dsa-self-paced"
itemprop="course">Visit Courses</a>
</li>
</ul>
</div>
</body>
</html>
Structured data: The data from the previous example is displayed in the following table.
| itemscope | item type | channel | |
| itemprop | (itemprop name) | (itemprop value) | |
| itemprop | topic | A Computer | |
| itemprop | stack | Competitive Programming | |
| itemprop | name | Courses | |
| itemprop | full_course | Visit Courses | |
| itemprop | stack | DataStructure & Algorithm | |
| itemprop | course | Visit Courses | |
Example 3:
Representing structured data for a recipe
The following example has four itemscope properties. The matching item attribute determines the scope of each item element. As indicated by the first item type, item types Recipe, AggregateRating, and NutritionInformation in the example below are schema.org structured data for a recipe.
<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</span>
</span>
</p>
<p>
Published:
<time datetime="2022-11-05" itemprop="datePublished">
November 5, 20022
</time>
</p>
<span itemprop="description">
This is my grandmother's apple pie recipe. I like to add a dash of nutmeg.
</span>
<br />
<span
itemprop="aggregate rating"
item scope
itemtype="https://schema.org/AggregateRating">
<span itemprop="rating value">4.0</span> stars based on
<span itemprop="reviewCount">35</span> reviews
</span>
<br />
Prep time: <time datetime="PT30M" itemprop="prep-time">30 min</time>
<br />
Cook time: <time datetime="PT1H" itemprop="cookTime">1 hour</time>
<br />
Total time: <time datetime="PT1H30M" itemprop="total-time">1 hour 30 min</time>
<br />
Yield: <span itemprop="recipeYield">1 9" pie (8 servings)</span>
<br />
<span
itemprop="nutrition"
itemscope
itemtype="https://schema.org/NutritionInformation">
Serving size: <span itemprop="servingSize">1 medium slice</span><br />
Calories per serving: <span itemprop="calories">250 cal</span><br />
Fat per serving: <span itemprop="fatContent">12 g</span><br />
</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>
Representing structured data for a movie
The itemtype is defined as "http://schema.org/Movie" in the example below, and four associated itemprop properties are specified.
| Item type | Movie | ||
| itemprop | (itemprop name) | (itemprop value) | |
| itemscope | itemprop | director | Prashanth Varma |
| itemprop | genre | Action, Comedy, Superhero, Adventure | |
| itemprop | name | Hanuman | |
| itemprop | trailer | https://www.youtube.com/watch?v=MKqJBhOgapM | |
HTML
<div itemscope itemtype="https://schema.org/Movie">
<h1 itemprop="name">Hanuman</h1>
<span>
Director: <span itemprop="director">Prashanth Varma </span>
</span>
<span itemprop="genre"> Action, Comedy, Superhero, Adventure </span>
<a href=" https://www.youtube.com/watch?v=MKqJBhOgapM " itemprop="trailer">Trailer</a>
</div>
Supported Browsers
Opera
Google Chrome
Edge 12 and above
Mozilla Firefox
Safari