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 =
</ p >
< a itemprop = "url" href =
Link to Site
</ a >
</ section >
</ div >
</ body >
</ html >
|
Output:
output image
Last Updated :
26 Aug, 2021
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...