One of the problems with basic XHTML markup is its inherent lack of meaning. Programs scour the internet constantly, looking for patterns and repeated structures to do many tasks, from predicting market fluctuations to showing me the current song playing on groove salad. Automated bots are working non-stop to bring us closer to the content out there through indexing. Without meaning embedded, it takes a fair amount of processing power to determine the meaning of content.

Semantic Markup

The concept of semantic markup is the idea that tags can convey meaning by themselves. Take the following HTML snippet:

<div class="title">Semantics 101</div>
<div class="chapter">Deeper Meaning In Your Documents</div>
<div class="paragraph">One of the problems with basic XHTML...</div>


The use of generic <div> tags creates an ambiguous situation—in order for browsers to display this information with more value it has to be accompanied by Cascading Style Sheet (CSS) information, which would attach presentation styles to each <div> . A <div> with class title should probably be bigger than a chapter, but the browser has no idea what titles and chapters are. Using semantic markup, we can rewrite this snippet and give browsers an idea of how to display this information by default:

<h1 class="title">Semantics 101</h1>
<h2 class="chapter">Deeper Meaning In Your Documents</h2>
<p>One of the problems with basic XHTML...</p>


All browsers know to interpret h1, h2, and p tags as the heading 1, heading 2, and paragraph markers they are, without any further information. The web page will now make more sense as a document, which makes it easier to make judgements about the importance, or appropriate prominence of the information to be displayed. These semantic tags can be styled in CSS just like the more ambiguous <div> tags.

Microformats

In order to further provide meaning—semantics—to the markup of the web, the idea of Microformats has emerged. Microformats use existing tags and add hints to markup that give things meaning, just like semantic tags in XHTML.

Take the following XHTML snippet, without any Microformat info:

<div>
<div>Joe Coder</div>
<div>Method, Inc.</div>
<div>915-555-1212</div>
<a href="http://method.com/">http://method.com/</a>
</div>


Compared to the Microformat conforming version:

<div class="vcard">
<div class="fn">Joe Coder</div>
<div class="org">Method, Inc.</div>
<div class="tel">915-555-1212</div>
<a class="url" href="http://method.com/">http://method.com/</a>
</div>


CSS class names are used to mark otherwise unknown entities of data.

Firefox has a few plugins available that will either call out the use of Microformats on sites or go so far as to enable extra features. Imagine your desktop address book integrated with Yahoo! Local and Upcoming in cahoots with Google Calendar. The development of and further explicit uses of Microformats are only limited by the creativity of application designers.

I'm curious if the Microformat parsers are clever enough to allow the use of compound class names such as <div class="vcard minimized"> and <div class="vcard draggable"> to allow transparent use of JavaScript DHTML libraries that rely on class names to function. Sounds like a test page is in order.