In this Code Shot post, I'll provide a sample template that I've used in the past for marking up and styling address information in the hCard microformat.
Html Template
<div class="vcard">
<a class="fn org url" href="http://randomactsofcoding.blogspot.com">Random Acts of Coding</a>
<div class="adr">
<div class="street-address">123 Any Street</div>
<span class="locality">Some Town</span>
<abbr class="region" title="Missouri">MO</abbr>
<span class="postal-code">12345</span>
<div class="country-name">USA</div>
</div>
<div class="tel">
<span class="type">Work</span> <a rel="nofollow" href="tel:1234567890">123-456-7890</a>
</div>
<div class="tel">
<span class="type">Mobile</span> <a rel="nofollow" href="tel:0987654321">098-765-4321</a>
</div>
<div>Email:
<span class="email">name@domain.com</span>
</div>
</div>
CSS Template for the Html
div.vcard
{
margin:5px;
font-size:0.6em;
}
div.vcard .url
{
}
div.vcard .org
{
}
div.vcard .fn
{
}
div.vcard .adr
{
}
div.vcard .adr .street-address
{
}
div.vcard .adr .locality
{
}
div.vcard .adr .region
{
}
div.vcard .adr .postal-code
{
}
div.vcard .adr .country-name
{
}
div.vcard .tel
{
}
div.vcard .tel a
{
text-decoration:none;
color:Black;
cursor:default;
}
div.vcard .email
{
}
Example
Additional Resources
