HTML5 Microdata
By @islamzatary
By @islamzatary
Microformat: are small patterns of HTML to represent commonly published things like people, events, blog posts, reviews and tags in web pages.
Microdata: used to nest metadata within existing content on web pages for
Search engines, web crawlers, and browsers can extract and process Microdata from a web page and use it to provide a richer browsing experience for users.
Microdata uses a supporting vocabulary to describe an item and name-value pairs to assign values to its properties.
Microdata is an attempt to provide a simpler way of annotating HTML elements with machine-readable tags.
And Its very hard to create html element for each one like(person, event, ...), HTML cant please everything.
All Elements
And its designed to be integrated into HTML5 itself & its recommended from Google
So How its work
Microdata annotates the DOM with scoped name/value pairs from custom vocabularies.
for example: there is a section & article as from reserved vocabulary, but its doesnt included elements to represent a person or event, so If you want to represent it on a web page, you’ll need to define your own vocabulary.
Microdata lets you do this.
Example
For example, a Person vocabulary could define properties like name and photo.
The simplest way to think of microdata scoping is to think about the natural parent-child relationship of elements in the DOM.
Microdata is about applying additional semantics to data that’s already visible on your web page, so it’s a complement to HTML.
audio => src
a => href
time => datetime
all => text
Schema.org => Person, Event, Organization, Product, Review, Review-aggregate, Breadcrumb, Offer, Offer-aggregate.
1. Person: before and after, : Complete
2. Event: before and after
There are two major classes of applications that consume HTML, and by extension, HTML5 microdata:
1. Web browsers: HTML5 defines a set of DOM APIs for extracting microdata items, properties, and property values from a web page. at this time no browser supports this API.
2. Search engines: Google supports microdata as part of their Rich Snippets program, When Google’s web crawler parses your page and finds microdata properties, it parses out those properties and stores them alongside the rest of the page data.
Webmastertool
Microdata Generator
Another Generator
Sites Using Microdata:
http://ephesusbreeze.com/
http://europeanhairtransplant.se/
http://holidayplace.co.uk/about/customer-feedback
by @islamzatary