Frontendplace Blog

Sharing Frontend developing ideas

Adding semantic snippets with microformats

Posted by info on September 19th, 2010

One of the newly emerging open standards are microformats for adding more meaning to small blocks of content within your document markup.
Microformats are pieces of xml/xhtml to use in your html webpage that will format common used pieces of information. These represents things like people, events, tags etc.
They are readable for humans and machine and can be used to share between different applications.
One example is the vCard format for an address which is often used.

BEGIN:VCARD
VERSION:3.0
N:Smith;John
FN:John Smith
URL:http://smith.com/
TEL;TYPE=MOBILE,PREF:+336234567890
END:VCARD

and as markup formatted hCard.

<div class="vcard">
	<a class="url fn" href="http://johnsmith.com/" >
		JohnSmith
	</a>
	<span class="tel" >
		<span class="type">mobile</span>
		(<span class="type">pref</span>erred):
		<span class="value">+336234567890</span>
	</span>
</div>

Other example equivalent for name in vCard : N:Smith;John;Mr.;Esq.,Ph.D.

<span class="n">
<span class="honorific-prefix">Mr.</span>
<span class="given-name">John</span>
<span class="family-name">Smith</span>,
<span class="honorific-suffix">Esq.</span>,
<span class="honorific-suffix">Ph.D.</span>
</span>

You can find some tools to create these formats and find other information about these standards on http://microformats.org/

Some other formats:

People and Organizations
hCard, XFN
Calendars and Events
hCalendar
Opinions, Ratings and Reviews
VoteLinks, hReview
Licenses:
rel-license
Tags, Keywords, Categories
rel-tag
Lists and Outlines
XOXO
Moreā€¦
See the list of all microformats