HTML itemscope Attribute

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:

HTML itemscope Attribute

Explore