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
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...