Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

What is Microdata in HTML5 ?

  • Difficulty Level : Expert
  • Last Updated : 26 Aug, 2021

Microdata lets you define your own custom-tailored elements and start implanting custom-tailored properties in your web pages. At a high level, microdata comprises a set of name-value pairs. Microdata syntax consists of a set of (name-value) that can be acquired using machine parsing tools. Microdata uses a vocabulary to narrate an item and name-value pairs to allocate values to its belongings. Microdata is an attempt to provide an easy way of annotating HTML elements with machine-readable tags and analyzing web pages. This allows search engines to highlight or highlight more applicable information.

The groups are called items, and each name-value pair is a property. Items and properties are represented by regular elements.

Defining Microdata Vocabulary: Microdata vocabularies provide the semantics or meaning of an Item. Web developers can design a custom vocabulary or use vocabularies available on the web OR To define microdata vocabulary you need a namespace URL that points to a working web page. For example, https://abc-xyz.org/geek (example site) can be used as the namespace for a personal microdata vocabulary with the following named properties:

  • name: Person name as a simple string.
  • Country: Country name as a simple string.
  • url:  A website belonging to the user.
  • photo:  A URL to a picture of the user.

 

Global attributes: Some of the global attributes of microdata are described below.

Sr.No.    

Attribute

 Description

1.itemscope           Defines the scope of the microdata items. The itemscope attribute is a Boolean attribute that tells that there is Microdata on this page
2.itemtype A URL to define the vocabulary used for encoding the microdata and provides the context for the properties.
3.itemprop  Defines the property (name-value) of the microdata.
4.itemref itemref provides a list of element IDs with additional properties. itemref attribute can only be written with itemscope attribute.
5.itemidIt’s a global identifier for a Microdata item.

Example 1: In this example, to create an item, the itemscope attribute is used, and to add a property to an item, the itemprop attribute is used on one of the item’s successor.

HTML




<!DOCTYPE html>
<html>
  
<body>
    <div itemscope>
        <p>This website is
            <span itemprop="name" 
                style="color:green">
                <b>GeeksForGeeks</b>
            </span>.
        </p>
    </div>
  
    <div itemscope>
        <p>
            Learn from the basics,of Data 
            Structure and Algorithms from
            <span itemprop="name" 
                style="color:green">
                <b>DSA-Self Paced</b>
            </span>.
        </p>
  
        <p>I live in
            <span itemprop="country" 
                style="color:green">
                <b>India</b>
            </span>.
        </p>
    </div>
</body>
  
</html>

Output: 

Example 2: In this example, we have defined properties as microdata. When Google’s web crawler parses your page and finds microdata properties that conform to the  https://abc-xyz.org/geek (example site) vocabulary, it parses out those properties and stores them alongside the rest of the page data.

HTML




<!DOCTYPE html>
<html>
  
<body>
    <div itemscope>
        <section itemscope 
            itemtype="https://abc-xyz.org/geek">
            <h1 itemprop="name">GeeksForGeeks</h1>
            <p>
                <img itemprop="photo"
                    src=
            </p>
  
            <a itemprop="url" href=
                "https://www.geeksforgeeks.org/">
                Link to Site
            </a>
        </section>
    </div>
</body>
  
</html>

Output:  

output image

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!