The HTML itemscope attribute works with item types to ensure that the HTML contained in a block is about a particular item. Defining the itemscope attribute for any element creates a new item, which results in a number of name-value pairs that are associated with the element.
Syntax:
<element itemscope></element>
Example 1: The below example illustrates the itemscope attribute in HTML.
HTML
<!DOCTYPE html>
<html>
<body>
<center>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<strong>HTML itemscope Attribute</strong>
</center>
<div itemscope itemtype=
"https://www.youtube.com/channel/UC0RhatS1pyxInC00YKjjBqQ">
<h1 itemprop="name">Courses</h1>
<span>Geeksforgeeks:
<span itemprop="topic">A Computer</span>
Science portal for Geeks
</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>
Output:
Structured data: The following table shows the structured data from the preceding example.
itemscope | itemtype | channel |
itemprop | (itemprop name) | (itemprop value) |
itemprop | topic | A Computer |
itemprop | stack | Web Developer |
itemprop | name | Courses |
itemprop | full_course | Visit Courses |
Example 2: In this example we displays a webpage featuring GeeksforGeeks content with microdata. It includes a section for DSA courses, utilizing itemscope and itemprop to define structured data properties like course name, topics, and links.
HTML
<!DOCTYPE html>
<html>
<body>
<center>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<strong>HTML itemscope Attribute</strong>
</center>
<div itemscope itemtype=
"https://www.youtube.com/channel/UC0RhatS1pyxInC00YKjjBqQ">
<h1 itemprop="name">DSA Courses</h1>
<span>Geeksforgeeks:
<span itemprop="topic">A Computer</span>
Science portal for Geeks
</span>
<br>
<ul>
<li>
<span itemprop="stack">
Competitive Programming
</span>
<a href=
"https://www.geeksforgeeks.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.geeksforgeeks.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>
Output:
Structured data: The following table shows the structured data from the preceding example.
itemscope | itemtype | 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 |
Supported Browsers: