Microdata is markup that adds semantics to web pages in a way that computers can understand.
When third party software needs to extract meaning from a website, they should turn to microdata.
These machine-readable properties can be processed by software searching
for specific types of information. Some search engines, Google in
particular, already support microdata in HTML 5 and use it to improve
search engine results as shown in the results for the CBS, USA and The CW networks and the Nip/Tuck TV Series in the image on the right.
The groups are called items, and
each name-value pair is a property.
We will now have a look at the global attributes used in HTML5 to define custom properties:
1) itemscope : This attribute is used to notify that Microdata is being used in the web page. We create an item by using itemscope.
2) itemtype : This attribute is a URL to define the item.
3) itemid : This attribute is used to identify an item.
4) itemprop : This attribute is used to define a property of an item. Microdata consists of name-value pairs and the value of the properties is defined here.
5) itemref : This attribute is used to define the context of a webpage.
Example 1
<html>
<head>
<title> Microdata </title>
</head>
<body>
<section itemscope
itemtype="http://learnhtml5programming.blogspot.in/"
itemid="ISBN:0-330-34032-8"
itemref="author_information">
<h1 itemprop="title"> HTML5 </h1>
<p itemprop="street-name"> 35 Livery St. </p>
<p itemprop="country"> California </p>
<p itemprop="contact-info"> prasanth_saseendran@yahoo.co.in </p>
</section>
<div id="author_information" itemprop="author">Prasanth Saseendran</div>
</body>
</html>
Example 2
<div itemscope itemtype="http://schema.org/LocalBusiness">
<p itemprop="name">Developer City</p>
<div>
<img itemprop="logo" src="a.jpg" alt="Developer City Logo">
</div>
<p itemprop="description">
Web Design and Development Services.
</p>
<div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
<span itemprop="streetAddress">Seatons Business Centre, High Street</span>
<span itemprop="addressLocality">Guilsborough</span>
<span itemprop="addressRegion">Northamptonshire</span>
<span itemprop="postalCode">NN3256</span>
</div>
<p>
Tel: <span itemprop="telephone">999999999</span>
</p>
<p>
Email: <a href="prasanth_saseendran@yahoo.co.in" itemprop="email">prasanth_saseendran@yahoo.co.in</a>
</p>
<p>
Web: <a href="http://learnhtml5programming.blogspot.in/" itemprop="url">http://learnhtml5programming.blogspot.in/</a>
</p>
</div>
When third party software needs to extract meaning from a website, they should turn to microdata.
These machine-readable properties can be processed by software searching
for specific types of information. Some search engines, Google in
particular, already support microdata in HTML 5 and use it to improve
search engine results as shown in the results for the CBS, USA and The CW networks and the Nip/Tuck TV Series in the image on the right.The groups are called items, and
each name-value pair is a property.
We will now have a look at the global attributes used in HTML5 to define custom properties:
1) itemscope : This attribute is used to notify that Microdata is being used in the web page. We create an item by using itemscope.
2) itemtype : This attribute is a URL to define the item.
3) itemid : This attribute is used to identify an item.
4) itemprop : This attribute is used to define a property of an item. Microdata consists of name-value pairs and the value of the properties is defined here.
5) itemref : This attribute is used to define the context of a webpage.
Example 1
<html>
<head>
<title> Microdata </title>
</head>
<body>
<section itemscope
itemtype="http://learnhtml5programming.blogspot.in/"
itemid="ISBN:0-330-34032-8"
itemref="author_information">
<h1 itemprop="title"> HTML5 </h1>
<p itemprop="street-name"> 35 Livery St. </p>
<p itemprop="country"> California </p>
<p itemprop="contact-info"> prasanth_saseendran@yahoo.co.in </p>
</section>
<div id="author_information" itemprop="author">Prasanth Saseendran</div>
</body>
</html>
Example 2
<div itemscope itemtype="http://schema.org/LocalBusiness">
<p itemprop="name">Developer City</p>
<div>
<img itemprop="logo" src="a.jpg" alt="Developer City Logo">
</div>
<p itemprop="description">
Web Design and Development Services.
</p>
<div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
<span itemprop="streetAddress">Seatons Business Centre, High Street</span>
<span itemprop="addressLocality">Guilsborough</span>
<span itemprop="addressRegion">Northamptonshire</span>
<span itemprop="postalCode">NN3256</span>
</div>
<p>
Tel: <span itemprop="telephone">999999999</span>
</p>
<p>
Email: <a href="prasanth_saseendran@yahoo.co.in" itemprop="email">prasanth_saseendran@yahoo.co.in</a>
</p>
<p>
Web: <a href="http://learnhtml5programming.blogspot.in/" itemprop="url">http://learnhtml5programming.blogspot.in/</a>
</p>
</div>
No comments:
Post a Comment