HTML5-What Is MiCroData?


What Is MiCroData?

One of the most overlooked new features of HTML5 is Microdata. Microdata allows us to more specifically categorize and label our web content in a machine-readable  way. Why this is important is because it may positively affect your search results 

When you search for something on Google or elsewhere, you get a list of links with a few sentences of description below them. We all use these descriptions—which Google calls “Rich Snippets”—to determine which link to click on


Why would you want to do this???  There are lots of reasons

 >>>>Here a few possible one


 you can mark up the date of an event, so a browser can automatically offer to add it to a visitor’s calendar  .

You can mark up your contact information, so a browser can automatically offer to add it to a visitor’s address book    .

You can mark up your blog post, so feed readers can just look at your HTML and automatically extract a feed from it        .

You can mark up your resume, so that when you use a site like LinkedIn you can just point it at your resume page and it can automatically extract all the information it needs



Microdata is about applying additional semantics to data thats already visible on your web page

With just a few simple lines of code, easily memorable HTML5 Microdata allows you to mark up pages with semantic meaning

Microdata is not designed to be a standalone data format. Its a complement to HTML

Microdata is part of the html5 spec though, and it currently has the backing of 

 Google, Bing, and Yahoo and so has a good chance of becoming a standard we all support


 How It WorKs?


To use Microdata, we must add at least three new attributes to our existing HTMl 

 To use Microdata  all we have is really just adding some extra attributes to your existing HTMl . Where microformats uses classes, microdata primarily uses 3 new attributes




The itemscope attribute is a boolean attribute that tells any machine that is reading our document that there is Microdata on this page, and this is where it starts. You are creating the item with the use of itemscope Any element with an itemscope can also have the itemtype attribute. .

 The itemtype attribute, if specified, must have a value that is a valid URL that is an absolute URL. 


Itemprop defines a property of the item that means it giving the context of our itemAnd

here there is example to show this



And the result is this


The MiCroData DOM API

Microdata becomes even more helpful when you start using the associated DOM API to manipulate items and properties on a page programmatically, perhaps to present the information in a searchable/filterable manner, or deliver it to another application somewhere else.


The API is very simple — you use the document.getItems() method to grab a nodelist containing the microdata items on a page. If you leave the arguments blank, you’ll just grab all items; or you can specify a specific itemtype URL as an argument to just grab items of that type. For example

Would grab our biography item and store it in a variable. Once you’ve grabbed your item(s), you can then access the different properties with the properties attribute

                                                                                                                MiCroData ;  PeOpLE  aNd BuisEness                                 

if you have ever searched someone’s LinkedIn results, you might have seen something like this


BUT Google will process three formats currently. They are RDFa, Microformats, and you Guessed >>>  Microdata & While LinkedIn uses Microformats, 

We can now provide context from our HTML to give better search results.

after using microdata  and TESTing  google result

That will show

And that is the extra context that google has shown

  MiCroData: EvEnts

The final example to talk about is the ability of giving some context of upcoming events through Microdata. Events are a common searched item. You may well be working on a website that has scheduled events, which you want to show. Let’s give a little more context for machines and see how it might be use


and the result will be

Google could use this additional data in search results

wit my best wishes by Dina Wasef   

  1. #1 by AhmedYousef on August 21, 2011 - 11:35 pm

    مقال رائع جدا ومفيد جدا جدا جدا وخاصة محركات البحث دى أنا كنت عارف إننا ممكن نعملها فى تاج head لكن دى طريقه جديدة عليا فعلا شكرا

  2. #2 by Dan Richey on August 29, 2011 - 6:39 am

    Great great post!! Thanks for sharing. You helped to clarify many questions I had about microdata. I have been doing a lot of research lately to try and learn it and this post is the best I have read. I enjoyed your screen shots as well of how microdata will help. Thanks again.

  3. #3 by MedhatDawoud on August 30, 2011 - 11:02 am

    very nice article … i wasn’t read before 🙂 weldone dina keep it up

  1. 10 Articles Introduction to HTML5 is Done ! « DevelopersMix's Blog

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: