HTML5 - Microdata
What is HTML5 Microdata
HTML5 introduces the microdata feature which is a new method for specifying extra syntactic semantics in your websites that uses HTML5.
HTML5 microdata provides the infrastructure to create your very own unique and special element and also help in the addition of unique or custom properties in your web pages.
The microdata groups are referred to as items and each name-value pair in the groups is referred to as property. The items and properties are represented by just regular elements.
Example
- To make a new item, the itemscope attribute is used which is a microdata
- In other to add a property to a particular item, the itemprop attribute is made use of on one of the item's descendants
In the code below there are just 2 items, each of these items have the property "name" :
<html> <body> <div itemscope> <p>My name is <span itemprop = "name">Zara</span>.</p> </div> <div itemscope> <p>My name is <span itemprop = "name">Nuha</span>.</p> </div> </body> </html>
Microdata properties mostly have values as strings but it can also have the following types of data:
Global Attributes
HTML5 Microdata was shipped with 5 global attributes that are available for use by any element and also give context for computers about your data
1. Itemscope
2. Itemtype
3. Itemid
4. Itemprop
Properties Datatypes
Properties generally have values that are strings as mentioned in the above example but they can also have values that are URLs. The code example below just has one property, "image", whose value is a URL:
<div itemscope> <img itemprop = "image" src = "tp-logo.gif" alt = "TutorialsPoint"> </div>
Properties can also have values that are dates, times, or dates and times. This is done by using the time element and its datetime attribute.
<html> <body> <div itemscope> My birthday is: <time itemprop = "birthday" datetime = "1971-05-08"> Aug 5th 1971 </time> </div> </body> </html>
Properties can be groups of key-value pairs, just by adding the itemscope attribute on the element that initiates the property.
Jobs Vacancy
The Jobs portal provides you with real time Jobs Opening and Vacancy Updates curated globally. Start applying for your dream job with ease in any location you choose.
Learn More >>
CV Builder
The CV Builder provides you with comprehensive guide and proven steps to take in writing a professional CV including top CV templates to get you started quickly.
Learn More >>
