Pixelbox

Microformat's are great, and enable us to add even better semantics to our HTML. Using browser plugins we are starting to see the start of what is possible, Operator 0.9.2 offers fantastic functionality in Firefox, and hopefully we will soon see more main stream implementations by the browser manufacturers.

Ideally an IE plugin, but also something on the iPhone or Blackberry will really make this take off in the business arena. Being able to add to your phone book, or quickly get directions to your meeting at the touch of a button is all kinds of awesomeness!

Currently I have my HTML hat on and noticed that one of the main examples on the Microformats website offered little structural semantics via the use of HTML. Admittedly it was a real world example, but I still think there was a lot that could be improved:

From this adapted from http://microformats.org/wiki/hcard#Live_example

<div class="vcard">
  <a class="fn org url" href="http://www.cerosmedia.com/">Ceros Media</a>
  <div class="adr">
    <span class="type">Head Office</span>:
    <div class="street-address">58/62 White Lion St</div>
    <span class="locality">Islington</span>,  
    <abbr class="region" title="London">London</abbr>  
    <span class="postal-code">N19PP</span>
    <div class="country-name">UK</div>
  </div>
  <div class="tel">
   <span class="type">Sales</span> +44 (0)8455211872
  </div>
  <div class="tel">
    <span class="type">Production</span> +44 (0)8455211873
  </div>
  <div class="tel">
    <span class="type">Support</span> +44 (0)8455211874
  </div>
  <div>Email: 
   <span class="email">info@cerosmedia.com</span>
  </div>
</div>

To this:

<dl class="vcard">
	<dt><a class="fn org url" href="http://www.cerosmedia.com/">Ceros Media</a></dt>
	<dd>
		<dl class="adr">
			<dt class="type">Head Office:</dt>
			<dd class="street-address">58/62 White Lion St</dd>
			<dd class="locality">Islington</dd> 
			<dd><abbr class="region" title="London">London</abbr></dd>
			<dd class="postal-code">N19PP</dd>
			<dd class="country-name">UK</dd>
		</dl>
		<dl class="tel">
			<dt class="type">Sales</dt>
			<dd>+44 (0)8455211872</dd>
		</dl>
		<dl class="tel">
			<dt class="type">Production</dt>
			<dd>+44 (0)8455211873</dd>
		</dl>
		<dl class="tel">
			<dt class="type">Support</dt>
			<dd>+44 (0)8455211874</dd>
		</dl>
		<dl>
			<dt>Email</dt>
			<dd class="email">info@cerosmedia.com</dd>
		</dl>
	</dd>
</dl>

I have used definition lists to wrap elements, and therefore been able to replace some spans with corresponding definition titles of definitions. This also gives a much better default styling without CSS, not to mention semantics :)