Microdata
HTML 4.0 has a certain set of fixed elements, for example, we have the <p> and the
<h1> elements for a specific purpose. However, in HTML5, we have the option of custom attributes. Suppose we have to define a person in HTML, we do not have an element for that. We cannot have elements for each and every thing. In HTML5, this can be resolved by using custom properties embedded in the document.
We can now use our own vocabulary in HTML5 and Microdata is used for that purpose. In Microdata, we use name-value pairs. We will now have a look at the global attributes used in HTML5 to deine custom properties:
- itemscope: This attribute is used to notify that Microdata is being used in the web We create an item by using itemscope.
- itemtype: This attribute is a URL to deine the
- itemid: This attribute is used to identify an
- itemprop: This attribute is used to deine a property of an Microdata
consists of name-value pairs and the value of the properties is deined here.
- itemref: This attribute is used to deine the context of a web
We will now look at a code snippet to see how these global attributes are used.
In the following code snippet, we will use all these global attributes so that we can understand its functionality. We are going to use these attributes within
a section element.
<html>
<head>
<title> About Fastread Tutorial </title>
</head>
<body>
<section itemscope itemtype="http://www.fastread.in">
<h1 itemprop="name"> FASTREAD TUTORIALS. </h1>
<p itemprop="theme"> All type of Tutorial </p>
<p itemprop="street-name"> 49, Jaitpur Badarpur </p>
<p itemprop="Pin-code"> 110004 </p>
<p itemprop="country"> India </p>
<p itemprop="contact-info"> [email protected] </p>
</section>
</body>
</html>
Now, we will see how important Microdata is in today's world. There is a reason why Microdata must be included in HTML code. Microdata is not a standalone component. As a matter of fact, it enhances the semantic feature of HTML. If you observe the code, you will see that we have included custom properties.