HTML itemscope Attribute
Last Updated :
13 Jan, 2023
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.
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:
HTML
<!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
Share your thoughts in the comments
Please Login to comment...