What is Microdata in HTML5 ?
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. | itemid | It’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 <h1 itemprop="name">GeeksForGeeks</h1> <p> <img itemprop="photo" src="https://media.geeksforgeeks.org/wp-content/cdn-uploads/20200817185016/gfg_complete_logo_2x-min.png"> </p> <a itemprop="url" href= Link to Site </a> </section> </div></body> </html> |
Output:
output image
Please Login to comment...