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 that’s 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. It’s 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
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