The semantic web is coming in a hurry, so now is as good a time as any to embrace it and spend a few minutes to update your web site accordingly.

On my site here, and for every member on my local community site, I use the same small snippet of HTML to make my contact information semantic.

HINT: You will notice that near the bottom of the HTML code, there is a link to download the hCard. This is a service that Technorati provides free of charge, and is a wonderful way to give your visitors yet another way to save your contact information. For more information on what an hCard is, read up about it at Microfromats.org.

HTML

<dl class="vcard">
 
 <dt>Mail:</dt>
  <dd class="adr">
    <div class="fn org">Business Name</div>
    <div><span class="nickname">Your Name</span>, 
    <span class="title">Owner</span></div>
    <div><span class="street-address">24 Main Street</span></div>
    <div><span class="locality">Pittsburgh</span>, 
    <span class="region">PA</span> 
    <span class="country-name">USA </span>
    <span class="postal-code">15202</span></div>
  </dd>
 
 <dt>Email:</dt>
  <dd><a href="mailto:admin@yourdomain.com" class="email">admin@yourdomain.com</a></dd>
 
 <dt>Phone:</dt>
  <dd class="tel">
    <span class="type">Work</span>
    <span class="value">412-555-9999</span>
  </dd>
  <dd><a href="http://technorati.com/contact/http://yourdomain.com/contactpage">hCard</a></dd>

</dl>

CSS

dl,dt,dd {margin:0; padding:0}

dl.vcard {margin:0 0 35px 5px;}

dl.vcard dt, dl.vcard .org, dl.vcard .type {display: none;}

dl.vcard dd.adr {padding-bottom: 1em;}