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: Below example illustrates the itemscope attribute in HTML.
<!DOCTYPE html> < html >
< body >
< center >
< h1 style = "color:green;" >
GeeksforGeeks
</ h1 >
< strong >HTML itemscope Attribute</ strong >
</ center >
< div itemscope itemtype =
< 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 =
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:
<!DOCTYPE html> < html >
< body >
< center >
< h1 style = "color:green;" >
GeeksforGeeks
</ h1 >
< strong >HTML itemscope Attribute</ strong >
</ center >
< div itemscope itemtype =
< 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 =
itemprop = "full_course" >Visit Courses</ a >
</ li >
< li >< span itemprop = "stack" >
DataStructure & Algorithm
</ span >
< a href =
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:
- Google Chrome
- Edge 12 and above
- Mozilla Firefox
- Safari
- Opera