MicroData in HTML5

In this article I am going to describe how to implement and use the MicroData Attribute in HTML5
  • 1768

MicroData in HTML5

Microdata is one of the way to provide additional semantics in your web pages.Microdata consist of group name-value pairs.In Microdata group are called items and its name-value is called properties.For creating microdata item we use itemscope attribute and in order to add property to item we use itemprop.

Syntax

<p itemscope>some text <span itemprop="name">Name</span></p>

Browser supporting MicroData Attribute

Browser supporting MicroData attribute are Firefox, Chrome, Opera.

Attributes

   Attributes            Description
   itemscope use to create an item.
   itemtype describe a valid URL to define the item and describe its property.
   itemid define the unique id for the item.
   itemprop define the property of an item.
   itemref describe the additional properties of an item.

Example of Microdata Attribute

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>MicroData in HTML5</title>

</head>

<body>

    <h1>Use of microdata in HTML5</h1>

    <div itemscope>

        <p>Name:<span itemprop="Name">Sachin</span>.</p>

        <p>Profile:<span itemprop="Profile">Software Developer</span>.</p>

        <p>Salary:<span itemprop="Salary">10000</span>.</p>

        <p>Company Name:<span itemprop="CompanyName">MCN Solution</span>.</p>

        <p>Joining Date:<time itemprop="JoiningDate" datetime="1-24-2013">24th Jan 2013</time></p>

        <img itemprop="image" src="/C:\Users\Public\Pictures\Sample Pictures/Tulips.jpg" alt="Flower" width="400" height="400" />

</body>

</html>

Output

microdata.jpg

© 2019 DotNetHeaven. All rights reserved.