Horje
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: 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:

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=
"/archive/courses/competitive-programming-live?utm_source=gfg-article&utm_medium=Q1-2023&utm_campaign=competitive-programming-live"
                    itemprop="full_course">Visit Courses</a>
            </li>
              
            <li><span itemprop="stack">
                DataStructure & Algorithm
            </span>
                <a href=
"/archive/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:

  • Google Chrome
  • Edge 12 and above
  • Mozilla Firefox
  • Safari
  • Opera

 


Reffered: https://www.geeksforgeeks.org

HTML

Related
Which tag is used to display additional information when we click to open or close on demand in HTML ? Which tag is used to display additional information when we click to open or close on demand in HTML ?
HTML DOM Input Search select() Method HTML DOM Input Search select() Method
HTML DOM Input Range defaultValue Property HTML DOM Input Range defaultValue Property
HTML &lt;menuitem&gt; type Attribute HTML &lt;menuitem&gt; type Attribute
HTML DOM Input Week select() Method HTML DOM Input Week select() Method

Type:
 Geek
Category:
 Coding
Sub Category:
 Tutorial
Uploaded by:
 Admin
Views:
 13



 

Horje