Few years back i have read about Semantic web in yahoo’s developer sites. it was amazing experience, at that time when world was moving from tables to div based markup or html4 to XHTML based markup. they told that web needs to be more semantic. by means of semantic is you can use some predefine standards to display data in the web. and search engines can use this predefine standards to explore the data and can learn more about the data in the web.
Using these standards search engines can evaluate sites on the web effectively and give very good results of user’s search. like if some user is searching for university in his area. then search engine can pull out university’s with reviews. and can actually have ability to sort the results on the basis of reviews from different different websites. now the real part is, how its possible to get reviews from different different websites? because developers have ability to use anything they want in review section page. how search engines going to know weather the tag or markup, developer has used is for name of the university or is it rating or review description? because some developers might use > div < tag whereas some will simply use > span < or some will use
> div < tag. yahoo at that time give answers to these questions as Resource Description Framework(RDF). RDF is developed by w3c to make web more semantic. you can read more about RDF at RDF
So what is RDF?
RDF is more like data about data. it can give meaning to your data. to know more about RDF you can refer RDF tutorial.
Now back to html5, What’s the relationship between html5 and RDF? well html5 uses Microdata as the format for giving meaning to tags. that’s what RDF does. but Microdata uses similar concepts but in more profound ways. Microdata can be embedded in the page itself unlike RDF. RDF was actually created for XHTML( although there is ongoing draft available at w3c to port RDF in html5). but let’s talk about Microdata. what are they ? how they are gonna provide meaning to your tags ? and how you can use it in your pages. or enter into the world of html5 semantic web.
Microdata is the data about the tags you write in your web pages. it gives meaning to html5 tags. it gives meaning to tags using vocabulary’s. you need to tell which vocabulary to use to understand the meaning of Microdata. one such example is Organization vocabulary. if you open the link you can see organization vocabulary, now this vocabulary defines what is the scope of Microdata you have provided in your code and what is the meaning of items you have specified in your code. example…
< section itemscope itemtype="http://data-vocabulary.org/Organization" > <h1 itemprop="name">Acme Inc <a itemprop="url">http://www.acmeinc.com</a> <span itemprop="tel">+1 4654 7894</span> </ section >
now this code can be evaluated by search engines or any other robots and they can know what type of data exists in the page and can get meaning of data from the tags. like here we have defined that section tag describes organization vocabulary by writing Microdata
< section itemscope itemtype="http://data-vocabulary.org/Organization" >
now whenever we give definition to our tag using itemprop attribute of Microdata it will search meaning of that tag into http://data-vocabulary.org/Organization vocabulary. i.e
<h1 itemprop="name">Acme Inc
this code will search into http://data-vocabulary.org/Organization vocabulary for the meaning of “name”. now if you look at the vocabulary page it defines “The name of the business” that means organization name. so now search engines or any other robots can know that what is the organization name. the same way other two property’s define URL of the organization and telephone no of the organization.
this is the way you can use microdata’s. and html5 specs says you can create your custom vocabulary’s and publish into your own url’s. it works just like namespace concept of java or .net or many popular languages feature.
now back to our classic example of some one searching for university. how search engine can show him reviews of university fetched from different websites. well if web pages which has review uses html5 and Microdata in same fashion then search engines can know how to fetch data from those web page and how to use the data.
let’s for example our site abc.com have university review like this.
< article itemscope itemtype="http://www.data-vocabulary.org/Review/"> <h1 itemprop="itemreviewed">Acme University</h1> <span><span itemprop="rating">3</span>out of 5</span> <p itemprop="summary">Acme University Review</p> <p itemprop="description"> Acme University is located at the alpus. campus is quite good. one thing i am concerned about the quality of education there. after i studied there for one year i believe they need to improve the quality of education. </p> </article>
which is both semantic and html5 correct review. but the old websites can also use this. say for ex some website already have structure then they can use Microdata to give the meaning to tags i.e.
< div itemscope itemtype="http://www.data-vocabulary.org/Review/" > < h5 itemprop="itemreviewed">Acme University < span itemprop="rating">3</span> < div itemprop="summary">Acme University Review</div> < p itemprop="description"> Acme University is located at the alpus. campus is quite good. one thing i am concerned about the quality of education there. after i studied there for one year i believe they need to improve the quality of education. < /p > < /div >
here markup is semantically incorrect but Microdata will still be available for the review. so this way any website can integrate html5 Microdata and can give wings to there markup. and search engines like Google, yahoo and Bing can understand the pages much better way and use this information to create Semantic web.
i hope this one helps you to understand some of the concepts of html5. questions or any queries ? drop comment or send me at twitter.com/hardikdangar
Hardik Dangar 