--- layout: post title: "Make your website semantic with Microdata" date: 2013-11-10 13:54 comments: true categories: [webdev] cover: /images/cover/avatar.png keywords: semantic web, web 3.0, semantics, semantic html, html5, microdata, microformat description: Use Microdata and make your web semantic --- Semantic web is getting more and more important. It's not just another buzzword. Semantic web allows data to be shared and reused across application, enterprise, and community boundaries [1]. One of benefits is that web pages with a clear semantic structure are more understandable for search engines. If a website should be semantic then its source code (HTML) has to be semantic. HTML5 semantic elements aren't good enough because they are too general. So let's extend HTML5. We have a few choices here -- [RDFa](http://en.wikipedia.org/wiki/RDFa) and some [microformats](http://en.wikipedia.org/wiki/Microformat). One of microformats is [Microdata](http://en.wikipedia.org/wiki/Microdata_(HTML). Microdata is actually a set of HTML attributes and elements used to describe meaning of web page content. I'll illustrate how simply it can be used. *Why I chose Microdata? I think it has simpler syntax than RDFa and because of schema.org (I'll explain later in the article).* # Example of turning non-semantic HTML into semantic HTML {% imgcap /images/no-microdata.png Example of a curriculum vitae header %} {% imgcap /images/with-microdata.png With Microdata attributes %} <!-- more --> I added to `<header>` element two attributes. `itemscope` tells that children of the `<header>` element describe some `itemtype` data. In the example I'm describing some person's data (because of `http://schema.org/Person` in `itemtype`). `h1` element has `itemprop` attribute with a value `name` which means it represents a person's name. Other elements represents URL, email and telephone of the person. # Tools [Schema.org](http://schema.org/) is an initiative of Google, Bing and other large search engines. It provides a large vocabulary of types and properties. You can find there types for events, places, products, organizations, etc. Also, you can find there an introduction to using Microdata. Before publishing website with Microdata you'll probably want to see how Google understand semantics of your page. Try [Structured Data Testing Tool](https://www.google.com/webmasters/tools/richsnippets). It also contains examples how to use Microdata attributes correctly. Another good site which gives you examples of Microdata usage is [getSchema.org](http://getschema.org/index.php/Main_Page). # Real world result of using Microdata A very obvious benefit of using Microdata describes a screenshot below. {% img /images/richsnippets.png %} You wouldn't see ratings, reviews count (and the Zack's picture :) ) without Microdata (check out IMDB's HTML -- you'll see plenty of `itemscope` and `itemtype` occurrences). *This article was also published on my school [blog](http://cinan.blog.matfyz.sk/p100814-make-your-website-semantic-with-microdata)*. Sources and further reading: 1. [http://www.w3.org/2001/sw/](http://www.w3.org/2001/sw/) 2. [Extending HTML5 — Microdata](http://html5doctor.com/microdata/)