Brian Cray ··· Home > Blog > Technology > HTML5 Microdata: Why isn't anyone talking about it?

HTML5 Microdata: Why isn't anyone talking about it?

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 header, article, 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.

HTML5 on the other hand is bringing with it a ton of actually useful technologies, including much needed advances in HTML forms, native video support, and a vector API/canvas.

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.

A few web design blogs, including one of my favorites, NETTUTS, has covered Microdata briefly, and I want to add some more fuel to the conversation.

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

Unlike all the ideology surrounding XML that never came to fruition, Microdata is already being adopted by Google as part of their rich snippets to aid in providing richer search results.

Google using Microdata events

image of a Google rich snippet for an events listing page

Google using Microdata people

image of a Google search rich snippet representing a person

Google using Microdata reviews

image of a Google rich snippet for an aggregate review of a restaurant

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?