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
What is Microdata Vocabulary in HTML5?
Microdata, which is a HTML Standard, used to nested metadata inside of existing web page content. Microdata from a web page can be extracted, processed, and used by web crawlers and search engines to give users a richer browsing experience. Microdata employs name-value pairs to give values to an item's properties and a supporting language to describe the thing.
Microdata Vocabularies
Microdata vocabularies offer an Item's semantics or meaning. Web designers might create a unique vocabulary or use online dictionaries. You require a namespace URL pointing to a live web page in order to define the microdata vocabulary.
For the creation of microdata vocabulary, we need to define some named properties. Let’s discuss three basic properties −
name(User Name)
photo (URL Belongs to User)
url (A website belonging to user)
Let’s dive into the examples to get a clear idea on what is microdata vocabulary in HTML5.
Example
In the following example we are using itemscope attribute to create an item, and itemprop attribute to add a property to item.
<!DOCTYPE html>
<html>
<body>
<div itemscope>
<p>Welcome To
<span itemprop="name"
style="color:blue">
<b>TUTORIALSPOINT</b>
</span>.
</p>
</div>
<div itemscope>
<p>
The
<span itemprop="name"
style="color:blue">
<b>Best E-Way Learning</b>
</span>.
</p>
</div>
</body>
</html>
Output
When the script gets executed, it will generate an output displaying the text we have used in the script with the help of itemscope and itemprop attributes on the webpage.
Example
Considering the following example, we are creating a rating scale using itemprop attribute.
<!DOCTYPE html>
<html>
<body>
<p itemprop="rating" itemscope itemtype="tutorialspoint/Rating">
★★★★☆(<span itemprop="value">4</span> on a rating of
<span itemprop="worst">0</span> to
<span itemprop="best">5</span>)
</p>
</body>
</html>
Output
On running the above script, it will generate an output consisting of rated text provided by using attributes on the webpage.
Example 3
You can try to run the following code to execute the microdata vocabulary.
<!DOCTYPE html>
<html>
<body>
<div itemscope>
<section itemscope itemtype = "http://data-vocabulary.org/Person">
<h1 itemprop = "name">Tutorialspoint</h1>
<p>
<img itemprop = "pic" src = "https://www.tutorialspoint.com/java/images/java-mini-logo.jpg">
</p>
<a itemprop = "URL" href = "https://www.tutorialspoint.com/index.htm">Click</a>
</section>
</div>
</body>
</html>
Output
When the user tries to execute the script, it will display a text, an image, and a URL belonging to the user on the webpage.
97 Views
