Written by Brian Cray on September 8th, 2010
Many big web design blogs are raving about HTML5, as they should be. But if you read many of them, [1, 2, 3], you'll be bombarded with an over-publicizing of
footer, et. al tags, which reminds me of circa 2002 when we were all jumping onto the XHTML bandwagon.
But 8 years later where'd XHTML get us? Suddenly we're moving back to HTML. Why? XHTML provided no actual benefits. It just meant we had to add meaningless bytes to our user's downloads.
But back to circa 2010/2002-wannabe. Here we are again bandwagoning (is that a word?) some futile tags of HTML5. Why get so excited about those tags? Look how flexible this is:
div id="ANYTHING". Wow.
So my fellow web design bloggers: let's shift our focus to something that's a part of the HTML5 definition, changes the way we write tags, and has actual benefits: Microdata.
What is HTML5 Microdata?
Old schoolies may remember this little thing called the Semantic Web. No I'm not talking about Semantic HTML, a fancy bit of jargon that by its mere mentioning can give web design newbies a glint of crazed evangelism in their eyes. No. I'm talking about actual ways to make the web more useful to users.
The Semantic Web would ideally help users find and use information because computers would know, for example, that an event is an event rather than a bunch of text. If a computer knows an event is an event, it could potentially add a mechanism to allow the user to add the event to his or her calendar. Otherwise, in what has been the norm, the computer arbitrarily displays the information putting the burden in the hands of the user.
While there have been many approaches to a semantic web, including XML, none of them have really taken off beyond APIs because Internet users don't read XML code. Users look at web pages. Additionally writing XML schemas was impractical and ill-adopted by web designers and search engines alike.
But "the times they are a-changin'." HTML5 is introducing Microdata, which is an API for adding semantic data to plain ol' HTML tags. This means that using plain ol' HTML tags, you can tell the a web browser or search engine that an event is an event, a person is a person, and so on.
How does Microdata markup look?
Using Microdata is simple, because unlike XML, you do the same thing you've been doing since you built your first website. The only difference is you add an extra attribute to your HTML tags, like so:
Before adding Microdata
<div> <h1>My big event</h1> <p>My big event is going to be fun. You should come.</p> <p>When: July 4th, 2022 at 6:00pm to July 4th, 2022 at 10:00pm.</p> <p>Where: Fun Times Bar</p> </div>
After adding Microdata
<div itemscope itemtype="http://data-vocabulary.org/Event"> <h1 itemprop="summary">My big event</h1> <p itemprop="description">My big event is going to be fun. You should come.</p> <p>When: <span itemprop="startDate" datetime="2022-07-04T18:00">July 4th, 2022 at 6:00pm</span> to <span itemprop="endDate" datetime="2022-07-04T22:00">July 4th, 2022 at 10:00pm</span>.</p> <p itemprop="location" itemscope itemtype="http://data-vocabulary.org/Organization">Where: <span itemprop="name">Fun Times Bar</span></p> </div>
As you'll see from the example above, we're still using plain old HTML tags, just adding some additional attributes.
Although completely going over all Microdata attributes is being the scope of this article, you can check out a a fantastic documentation on using Microdata at Dive into HTML5
Use Microdata for immediate benefits
Google using Microdata events
Google using Microdata people
Google using Microdata reviews
Google has a list of rich snippets for more examples of how you can use Microdata to product richer search results for your own web pages.
Taking Microdata even further tomorrow
Google's adoption of Microdata is taking us a step closer to a semantic web, and there are still big steps to make. However, I believe Microdata may be practical enough to get us really rolling on the semantic web train. Here are a few things I believe would help:
Microdata adoption by browsers
What if a user rolled over a person's name and could add them as a contact, or roll over an event and add it to your calendar, all within the native web browser UI? That'd be something, and it doesn't seem like it would be that hard to accomplish. How about it Mozilla, Safari?
Microdata adoption by web developers
Web browsers and Google have little reason to support Microdata if us web developers aren't marking up our webpages with it. Plain and simple. Take a few moments to learn the Microdata API a little, and the semantic web will be right at our doorstep.
What are your thoughts about Microdata?
Finally, I want to hear your thoughts on Microdata. Have you had any experience with it? What are some potential uses for Microdata that I haven't discussed?