Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Microdata API in HTML5
In HTML5, Microdata are used to nest metadata inside of already existing web page content. With this approach, machine-readable data may be easily inserted into HTML documents with a clear parsing paradigm. By using microdata, we may create our own unique elements and begin incorporating unique attributes into our web pages.
Microdata is made up of a collection of name-value pairs. Items are a collection of name-value pairs, and each name-value property is referred to as a property. Regular elements are used to represent items and properties.
HTML5 Microdata Global Attribute
The following five global properties are introduced by microdata and can be used by any element to provide context for computers about our data.
Let’s look into one by one to get better idea on microdata in HTML5.
Attribute |
Description |
|---|---|
| itemscope | Defines the scope of the microdata item. |
| itemprop | Defines the name/value pairs of the microdata. |
| itemtype | A URL to define the vocabulary used for encoding the microdata. |
| itemid | To set a unique identifier for the microdata items. |
| itemref | To include itemprop attributes outside the itemscope attribute. |
Let’s looking into the following examples of microdata API in HTML5 for getting better understanding.
Using the “item type” attribute
A property connected to a certain item type is an item type attribute. It functions as a global variable that can be referred to or altered by any process activity. Frequently, an item type property gives information about the object that is required for the workflow process to manage the item correctly.
Example
In the following example, we are using the itemscope attribute, which is a Boolean attribute that defines the scope of specified metadata along with an item type attribute.
<!DOCTYPE html>
<html>
<body>
<span itemprop="name">Welcome To Tutorialspoint</span>
<img src="https://www.tutorialspoint.com/images/logo.png" alt="Logo">
<div itemprop="aggregateRating" itemscope itemtype="https://www.tutorialspoint.com/images/logo.png">
<meter itemprop="Courses" min=0 value=3.5 max=5>Rated 3.5/5</meter>
(People Intrested <span itemprop="reviewCount"></span> In JAVA Learning)
</div>
</body>
</html>
Output
When the script gets executed, it will generate an output displaying the text along with an image uploaded using <img> src and a metre gauge on the webpage.
Using “itemref” Attribute
ref is a special attribute, enables us to get a direct reference to a particular DOM element or child component instance once it has been mounted.
Example
Considering the following example, where we are using the itemref attribute, which prints all the id values mentioned under the itemref attribute.
<!DOCTYPE html>
<html>
<body>
<div itemscope itemref="CARS BIKES">MOTORLIFE</div>
<article>
<div id=CARS1>
<span itemprop=CARS>BMW</span><br>
<span itemprop=CARS>BENZ</span>
</div>
<div id=BIKE1>
<span itemprop=BIKE>DUCATI</span><br>
<span itemprop=BIKE>TRIUMPH</span>
</div>
</article>
</body>
</html>
Output
On running the above script, it will generate an output consisting of text used in the script and generated by using the itemref attribute on the webpage.
Using “itemprop” Attribute
In order to add properties to an item, utilize the itemprop global attribute. An itemprop attribute, which takes a name-value pair as arguments, can be supplied for any HTML element.
Example
Look at the following example. We are using the itemprop attribute with the span tag inside the sentence.
<!DOCTYPE html>
<html>
<body>
<article itemscope>
<h2 itemprop="NAME">MSD</h2>
<ul>
<li>Nationality: <span itemprop="nationality">INDIAN</span></li>
<li>Age: <span itemprop="age">41</span></li>
<li>Hair colour: <span itemprop="colour">LONG BROWN COLOURED HAIR</span></li>
</ul>
</article>
</body>
</html>
Output
When the user tries to execute the script, it will display an output consisting of data on the webpage generated by using the "itemprop" attribute.
219 Views
