From Microformats Wiki
Revision as of 18:49, 20 December 2008 by Brian (talk | contribs) (Reverted edits by MonlaDronc (Talk) to last version by AndyMabbett)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to navigation Jump to search
This page is depreacted. For better examples, see examples-in-wild.

This page was to collect snapshots in time of events found "in the wild" for testing purposes. Also see an external page of test cases (404).



<a rel="tag" href="">blog</a>


 <a href="" rel="friend colleague met">Carrie Bickner</a>
 <li><a href="" rel="sweetheart date muse friend met" title="Amber Nixon">Amber</a></li>
 <li><a href="" rel="friend colleague met" class="" title="Jeffrey Zeldman">Jeffrey Zeldman</a></li>
 <li><a href="" rel="friend colleague met" title="Eric Meyer" class="ref xfnfriendly">meyerweb</a></li>
 <li><a href="" class="ref xfnfriendly" rel="friend colleague met" title="Douglas Bowman">Stopdesign</a></li>
 <li><a href="" class="ref xfnfriendly" rel="friend colleague met">Glazblog</a></li>
 <li><a href="" title="Matthew Mullenweg" rel="friend met colleague" class="ref xfnfriendly">photomatt</a></li>
 <li><a href="" rel='met friend colleague'>David Baron</a></li>
 <li><a href="" rel="friend colleague met" title="Ian Hickson">Hixie</a></li>
 <li><a href="" rel="met colleague friend" class="ref xfnfriendly" title="Jonas Luster"></a></li>
 <li><a href="" rel="met colleague friend" title="Adam Rifkin">Relax, Everything Is Deeply Intertwingled</a></li>
 <li><a href="" class="ref" title="David Andersen" rel="met acquaintance colleague co-worker"></a></li>
 <li><a href="" title="Richard Ault" rel="met co-worker friend" class="ref">ctrl-ault-del</a></li>
 <li><a href="" title="Adam Hertz" class="ref" rel="met acquaintance colleague co-worker">To Wish For Impossible Things</a></li>
 <li><a rel="met acquaintance colleague co-worker" href="">Joi Ito</a></li>
 <li><a href="" rel="friend met colleague co-worker" title="Kevin Marks">Kevin Marks</a></li>
 <li><a href="" title="Ian Kallen" rel="met acquaintance colleague co-worker">What's That Noise?!</a></li>
 <li><a href="" rel="met acquaintance colleague co-worker" title="David Sifry">Sifry's alerts</a></li>
 <li><a href="" rel="met friend colleague co-worker neighbor" title="Derek Powazek">This is Powazek</a></li>
 <li><a href="" rel="met friend colleague co-worker neighbor" title="Jason DeFillippo">A Fresh Start</a></li>
 <li><a href="" title="Bradley Allen" rel="met acquaintance colleague co-worker">Bradley Allen</a></li>
 <li><a href="" title="Robert Scoble" rel="met acquaintance colleague">Scobleizer</a> (<a href="" rel="met acquaintance colleague">2</a>) </li>
 <li><a href="" rel="colleague met">Nick Finck</a></li>
 <li><a href="" class="ref" title="Jason Kottke" rel="acquaintance met">kottke</a></li>
 <li><a href="" class="ref" rel="met acquaintance colleague" title="Aaron Swartz">Aaron Swartz</a></li>
 <li><a rel="met acquaintance colleague" href="" title="Danah Boyd">apophenia</a></li>
 <li><a rel="me" href="">orkut profile</a></li>



A very good implementation of the hCard standard

I noticed that this author keeps updating his implementation to reflect the revised drafts. Perhaps it is also good to notice the problem of not being able to put the suffix in a meta-description.

<div class="vcard">
	<img style="float:right; margin:4px" src="" alt="Profile photo" class="photo"/>

	<a class="url fn" href="" title="Full name"><span class="n given-name">Gerard</span> <span class="n family-name">Braad</span> Jr.</a>
        <span class="nickname">gbraad</span>

        <span class="bday" title="Date of Birth">1981-02-22</span>
	<div class="org" title="Organisation"><a class="url work" href="">Sur-V-ioN</a></div>
	<span class="role" title="Role">(Freelance) Software Developer</span>
	<div class="adr">
		<div class="street-address" title="Street">Rustenburgstraat 224</div>
		<span class="postal-code" title="Postal code">7311JC</span>
		<span class="locality" title="City">Apeldoorn</span>
		<span class="country-name" title="Country">The Netherlands</span>
	<div class="tel">
		<span class="pref work voice" title="Work phonenumber">+31 (0)87 1901 799</span>
		<span class="home voice" title="Home phonenumber">+31 (0)55 5150 002</span>
		<span class="cell voice" title="Cell phonenumber">+31 (0)6 4913 7996</span>
	<div class="email">
		<a class="pref internet" title="Primary email" href="">me at gbraad dot nl</a>
		<a class="internet" title="Alternate email" href="">gbraad at survion dot com</a>
		<a class="internet" title="Alternate email" href="">gbraad at spotsnel dot nl</a>

<div class="services">
	<span class="yahoo" title="Yahoo! contact">gbraad</span>
	<span class="msn" title="MSN contact"></span>
	<span class="icq" title="ICQ number">9864024</span>
	<span class="aim" title="AIM contact">gbraadjr</span>
	<span class="skype" title="Skype username">g_braad</span>
	<span class="gizmo" title="Gizmo username">g_braad</span>

  • This has the properties:
tel = +31 (0)55 5150 002 +31 (0)87 1901 799 +31 (0)55 7110 330 +31 (0)87 7846 866 +31 (0)6 4913 7996
email = me at gbraad dot nl gbraad at survion dot com
n = null
and lacks an "honorific-suffix" class on "Jr.". Also, the "alt" attribute on the image is almost certainly inappropriate.
(Tested with Operator 0.9) Andy Mabbett 12:01, 20 Jan 2008 (PST)


Multiple Tests

  • Tantek's blog always has a fresh selection of microformatted content:
  • The home page of this site?