Last Updated : 23 Jul, 2025
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-cp?utm_source=gfg-article&%3Butm_medium=Q1-2023&%3Butm_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:
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4