From Address to Microformats and hCard

Address element

On the surface, addr produces a fairly straightforward inline element used to indicate an address. As noted at HTML5 Doctor, though, too many of us use it too freely, and thus, incorrectly. The reason is that the element is supposed to be restricted to a web page’s author’s contact information.

Commonly misused

Here are a few basic examples, albeit used improperly.

  • Triangle Shirtwaist Factory Fire 29 Washington Place, New York, NY 10003
  • Haymarket Affair
    175 N Desplaines St
    Chicago, IL 60661
HTML Syntax
<ul>
	<li>Triangle Shirtwaist Factory Fire <addr>29 Washington Place, New York, NY 10003</addr></li>
	<li>Haymarket Affair<br /><addr>175 N Desplaines St<br />Chicago, IL 60661</addr></li>
</ul>

The addr element is supposed refer to contact-related data for an author or editor of a webpage. It is like very flexible metadata for a webpage. The data contained within addr tags can be quite broad and is certainly not limited to a postal address. It can include an email address, telephone or fax number, or any other contact-related data.

In the examples above, I have used the address element incorrectly. While the syntax is correct, the context or usage is wrong. And, the reason the usage is wrong is because the addresses listed have nothing to do with the me, the author of this webpage.

A simple and correct example

Dennis Osorio
New York, NY

HTML Syntax
<p><addr>Dennis Osorio<br />New York, NY</addr></p>

Microformats

Microformats refer to various ways of using ids, classes, and other data attributes to add metadata to HTML tags.

By adding structure and meaning to HTML elements, both humans and machines gain a clearer understanding of what content it contains or links to. Common examples include: link relationships; social relationships; people, organizations and place identifiers; event and calendar-based data identifiers; and more. For further reading, I recommend this series of articles.

Examples

  • Home; the use of the microformat rel=”home” identifies this link as pointing to the homepage in which this link appears. So, you should not use it to link to an external site.
  • ; this link uses the microformat, rel=”tag” to identify it as pointing to a webpage on the same site with content related to the keyword tag elements.
  • dposorio.com; the use of the microformat, rel=”me” helps identify a link as pointing to my homepage.
  • osoriophotos.com; this link contains the XFN microformat for social relationships to identify it as pointing to my sibling’s homepage.
HTML Syntax
<ul>
<li><a href="https://buildingwebsitesforthepeople.com/" rel="home">Home</a>; the use of the microformat <a href="http://microformats.org/wiki/rel-home" target="_blank">rel="home<"/a> identifies this link as pointing to the homepage in which this link appears, not for an external site.</li>
<li><a href="https://buildingwebsitesforthepeople.com/tag/elements/" rel="tag">elements</a>; this link uses the microformat, <a href="http://microformats.org/wiki/rel-tag" target="_blank">rel="tag"</a> to identify it as pointing to a webpage on the same site with content related to the keyword tag <em>elements</em>. This is microformat is meant to indicate keyword tags for content, not for the link itself.</li>
<li><a href="http://dposorio.com/" rel="me">dposorio.com</a>; the use of the microformat, <a href="http://microformats.org/wiki/rel-me" target="_blank">rel="me"</a> helps identify a link as pointing to my homepage.</li>
<li><a href="http://osoriophotos.com/" rel="sibling">osoriophotos.com</a>; this link contains the <a href="http://microformats.org/wiki/xfn" target="_blank"><abbr="XHTML Friends Network">XFN</abbr></a> microformat for social relationships to identify it as pointing to my sibling's homepage.</li>
</ul>

hCard

One common and useful microformat specification is hCard; it is used for contact and geographic data. It grew out of an earlier specification, vCard.

Example

photo of Dennis

1212 Fake St
Suite 1313
New York, NY 00000

212-555-1212
web design, web developer, quantitative research

HTML Syntax
<div class="vcard">
	<img src="http://1.gravatar.com/avatar/738c3058f2faf26d949d9b6224e42711?s=320" alt="photo of Dennis" class="photo alignright" />
	<div class="vcard-header">
		<div>
			<a class="url fn n" href="https://buildingwebsitesforthepeople.com/"><span class="given-name">Dennis</span> <span class="additional-name">P.</span> <span class="family-name">Osorio</span></a>
		</div>

		<div>
			<a class="url org" href="https://buildingwebsitesforthepeople.com/">Building Websites for the People!</a>
		</div>
	</div>

	<div class="adr">
		<div class="street-address">1212 Fake St</div> 
		<div class="extended-address">Suite 1313</div>
		<div>
			<span class="locality">New York</span>, <span class="region">NY</span> <span class="postal-code">00000</span>
		</div>
	</div><!-- end of .adr -->

	<div class="tel">212-555-1212</div>
	
	<div class="email" href="info@dposorio.com">info@dposorio.com</div>
	
	<div class="category-container">
		<span class="category">web design</span>, <span class="category">web developer</span>, <span class="category">quantitative research</span>
	</div><!-- end of .category-container -->
	
</div><!-- end of .vcard -->

Deconstructed

  • div class=”vcard”: this is required by the hCard specification and is used in any container to declare a new hCard instance.
  • img class=”photo”: this refers to an image used to represent the contact.
  • a class=”url fn n”: the class values used in the a element correspond with three hCard properties. Note how this link serves as a container for these three properties.
    1. url refers to the contact’s homepage.
    2. fn is a required property for any hCard, it declares a string that represents the best or preferred method for formatting a contact’s name.
    3. n declares there to be a container with the contact’s name in a structured format.
  • span class=”given-name”: a given name, often the contact’s first name;
  • span class=”additional-name”: other name, often the contact’s middle name;
  • span class=”family-name”: family name, often the contact’s last name;
  • a class=”url org”:
    1. url refers to the contact’s homepage.
    2. org refers to the contact’s organization or company.
  • div class=”email”: contact’s email address;
  • div class=”adr”: this indicates a container with the contact’s address using the adr microformat;
    • div class=”street-address”: street address;
    • div class=”extended-address”: to indicate apartment, suite, floor or another data that would appear in the second line of a street address;
    • span class=”locality”: to indicate city, town, municipality, or other locality;
    • span class=”region”: to indicate state, province, or other region;
    • span class=”postal-code”: to indicate a postal code;
  • div class=”tel”: to indicate a telephone number;
  • div class=”email”: to indicate an email address;
  • span class=”category”: to indicate a keyword tag;
CSS Syntax
#post-833 .entry-content .vcard,
#post-833 .entry-content .vcard img { border: 0.063em solid #000; /* 1px @ 16px font */ }
 
#post-833 .entry-content .vcard {
    display: inline-block;
    position: relative;
    width: auto;
    margin: 1.5em 0;
    padding: 0.5em;
    line-height: 1.2;
    background-color: #fff;
}
 
    #post-833 .entry-content .vcard:after {
        content: "."; 
        visibility: hidden; 
        display: block; 
        height: 0; 
        clear: both;
    }
    #post-833 .entry-content .vcard a { text-decoration: none; }
     
    #post-833 .entry-content .vcard div {
        clear: left;
        width: auto;
    }
     
        #post-833 .entry-content .vcard div.vcard-header {
            max-width: 69%;
        }
     
    #post-833 .entry-content .vcard img {
        max-width: 30%;
        margin-left: 1em;
    }
     
    #post-833 .entry-content .vcard .adr,
    #post-833 .entry-content .vcard .category-container { margin: 1em 0 0.8em 0; }
 
    #post-833 .entry-content .vcard .category-container,
    #post-833 .entry-content .vcard .org { font-style: italic; }
     
    #post-833 .entry-content .vcard .email,
    #post-833 .entry-content .vcard .tel { font-weight: bold; }   
     
    #post-833 .entry-content .vcard .category-container { max-width: 100%; }
    #post-833 .entry-content .vcard .fn { font: bold 1.25em /*20 px @ 16px font*/ times, serif; }

More hCard examples

Organization or Company

Work

149 New Montgomery Street
Floor 6
San Francisco, CA 94105
USA

Work: 415-839-6885
Fax: 415-882-0495

HTML Syntax
<div class="vcard">
	<img class="logo alignright" src="http://upload.wikimedia.org/wikipedia/foundation/9/9a/Wikimediafoundation-logo.png" alt="Wikipedia Foundation's logo" />
	
	<div class="vcard-header">
		<a class="url fn org" href="http://wikimediafoundation.org/">Wikimedia Foundation, Inc.</a>
	</div>

	<div class="adr">
		<span class="type">Work</span>
		<div class="street-address">149 New Montgomery Street</div>
		<div class="extended-address">Floor 6</div>
		<div>
			<span class="locality">San Francisco</span>,  <abbr class="region" title="California">CA</abbr> <span class="postal-code">94105</span>
		</div>
		<div class="country-name">USA</div>
	</div><!-- end of .adr -->

		<div class="tel">
			<span class="type">Work</span>: <span class="value">415-839-6885</span>
		</div>
		<div class="tel">
			<span class="type">Fax</span>: <span class="value"> 415-882-0495</span>
		</div>
	
</div><!-- end of .vcard -->
Deconstructed
  • div class=”vcard”: the use of this class in a container is required by the hCard specification.
  • img class=”logo alignright”: the relevant property is logo and it declares the image to be a logo
  • a class=”url fn org”:
    1. url refers to the contact’s homepage.
    2. fn a required property for any hCard, refers to a string representing the best/preferred method for formatting a contact’s name; this used in conjunction with org implies that this contact is not a person.
    3. org refers to the name of an organization or company.
  • div class=”adr”: this indicates a container with the contact’s address using the adr microformat;
    • span class=”type”: this specifies the type of address
    • div class=”street-address”: street address;
    • div class=”extended-address”: to indicate apartment, suite, floor or another data that would appear in the second line of a street address;
    • span class=”locality”: to indicate city, town, municipality, or other locality;
    • span class=”region”: to indicate state, province, or other region;
    • span class=”postal-code”: to indicate a postal code;
    • span class=”country-name”: to indicate a country;
  • div class=”tel”: to indicate a telephone number;
  • span class=”type”: this specifies the type of telephone number

I added the following to my stylesheet so that the address type would not be visible on the screen.

CSS Syntax
#post-833 .entry-content .vcard .adr .type {
	position: absolute;
	top: -99999em;
}

Place

Ludlow Massacre
April 20, 1914
37.339167, -104.583889
Ludlow, CO
HTML Syntax
<div class="vcard ludlow">
<div class="fn org">Ludlow Massacre</div>
<div><time class="value" datetime="1914-04-20">April 20, 1914</time></div>
<div class="geo">
	<span class="latitude">37.339167</span>, 
	<span class="longitude">-104.583889</span>		
</div><!-- end .geo -->
	<div class="adr">
		<span class="locality">Ludlow</span>, <abbr class="region" title="Colorado">CO</abbr>
	</div>
</div><!-- end .vcard -->
Deconstructed
  • div class=”vcard”: the use of this class in a container is required by the hCard specification.
  • div class=”fn org”:
    1. fn a required property for any hCard, refers to a string representing the best/preferred method for formatting a contact’s name; this used in conjunction with org implies that this contact is not a person.
    2. org refers to the name of an organization or company.
  • time class=”value” datetime=”1914-04-20″ refers to the name of an organization or company.
    1. time is an html5 element.
    2. class=”value” illustrates the use of a recognized microformats pattern, the value-class pattern
    3. datetime=”1914-04-20″ shows the use of another microformats pattern, the date-design pattern.
  • div class=”geo”: is microformats pattern used for geographic coordinates in WGS84 format.
    1. class=”latitude” refers to latitude
    2. class=”longitude” refers to longitude
  • div class=”adr”: indicates a container with the contact’s address.
  • span class=”locality”: to indicate city, town, municipality, or other locality.
  • span class=”region”: to indicate state, province, or other region.
CSS Syntax
.entry-content .ludlow .geo {
	position: absolute;
	top: -99999em;
}

.entry-content .vcard.ludlow .adr { margin: 0; }

Natural language

An hCard does not have be presented as a list or a table. It can be used in natural language.

About the Author

photo of Dennis

makes websites, writes tutorials, and conducts data-based research. His goal is to help nonprofit organizations and small businesses do good work. Dennis is based out of New York, NY. His homepage is located at dposorio.com

.

HTML Syntax
	<div class="vcard">
		<h3>About the Author</h3>
		<img src="http://1.gravatar.com/avatar/738c3058f2faf26d949d9b6224e42711?s=320" alt="photo of Dennis" class="photo alignright" />
		<p><a class="fn email" href="mailto:info@dposorio.com">Dennis Osorio</a> makes websites, writes tutorials, and conducts data-based research. His goal is to help nonprofit organizations and small businesses do good work. Dennis is based out of <span class="adr"><span class="locality">New York</span>, <span class="region"><abbr title="New York">NY</abbr></span></span>. His homepage is located at <a href="http://dposorio.com" target="_blank" rel="me" class="url">dposorio.com</a></p>.
	</div>
CSS Syntax
#post-833 .entry-content .vcard:last-of-type { max-width: 37.5em; } /* 600px @ 16px */

Leave a Reply

Your email address will not be published. Required fields are marked *