hCard microformat Validator (beta, of course)

This is an unofficial validator¹/conformance checker of the hCard microformat.

Po polsku
(translations welcome!)

Input

URL

Check entire XHTML or HTML page by entering its HTTP URL.

Fragment

Paste well-formed XHTML fragment or complete document containing hCard.

Upload

Upload HTML or XHTML file to validate it. For this to work your browser must be setting MIME types properly.

Example

If searching for hCards in the wild is tiring, check one of the test-cases:

Browse examples

API & Other

Any page by Referer

<a href="http://hcard.geekhood.net/referrer/">Validate hCards</a>

Bookmarklet

hCard?

RESTful JSON API

Send GET request to http://hcard.geekhood.net/?url=URL to validate&output=json.

Output will be roughly compatible with the Validator.nu JSON API. Likely to change in the future.

Please use this API for validation, not just as an converter/extraction tool.

Send Feedback

You can send feedback via e-mail or the form below.

If you're reporting a bug or have a suggestion, don't forget to include example hCard code.

Result

Congratulations! No errors found.

  1. No issues found.

    GEO latitude 
    37.38211
    longitude 
    -122.027965
    Formatted name 
    Max Rible Kaehn
    Name Given Name 
    Max
    Additional Name 
    Rible
    Family Name 
    Kaehn
    Photo URL http://www.mithriltabby.com/images/usericon.jpeg
    URL http://www.mithriltabby.com/

File source

<?xml version="1.0" encoding="UTF-8"?> <!-- -*- XML -*- -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head profile="http://microformats.org/profile/specs/"><title>mithriltabby - Max Kaehn’s home page</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<!-- Specifying UTF-8 in the HTTP headers doesn't persuade IE to use UTF-8. -->
<!--[if IE]>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->
<link rel="icon" type="image/png" href="images/zonk16x16.png" />
<link rev="made" href="http://www.mithriltabby.com/" />
<script type="text/javascript" src="code.js">
<!-- Can't use <script/> because I have to be able to serve this up to
Internet Exploder as text/html. -->
</script>

<link rel="home start contents" href="/" />
<link rel="next" href="names.xhtml" />
<link rel="meta" type="application/rdf+xml" title="FOAF" href="foaf.rdf" />
<link rel="feed" href="http://slothman.livejournal.com/data/rss" type="application/rss+xml" title="LiveJournal" />
<link rel="feed" href="http://feeds.delicious.com/rss/catslaugh" type="application/rss+xml" title="Delicious links" />
<link rel="feed" href="https://twitter.com/statuses/user_timeline/48087970.rss" type="application/rss+xml" title="Twitter" />
<link rel="feed" href="http://buzz.googleapis.com/feeds/106375266620508099787/public/posted" type="application/rss+xml" title="Google Buzz" />
<link rel="feed" href="http://api.flickr.com/services/feeds/photos_public.gne?id=11356736@N04&amp;lang=en-us&amp;format=rss_200" type="application/rss+xml" title="Flickr" />
<link rel="feed" href="http://www.librarything.com/rss/reviews/slothman" type="application/rss+xml" title="LibraryThing reviews" />
<link rel="feed" href="http://www.yelp.com/syndicate/user/FBp-DAU1vtSLg7ipitLUVA/rss.xml" type="application/rss+xml" title="Yelp reviews" />
<!-- http://wiki.whatwg.org/wiki/RelExtensions -->
<link rel="pronunciation" href="lexicon.xml" />
<meta name="description" content="The home page of Max Kaehn." />
<meta name="keywords" content="Max Rible Kaehn, Max Kaehn, Max Rible" />
<meta name="author" content="Max Rible Kaehn" />
<meta name="ICBM" content="37.38211, -122.027965" />
<meta name="geo.position" content="37.38211;-122.027965" />
<meta name="geo.placename" content="Maine Coon Manor, Sunnyvale, CA, US" />
<meta name="geo.region" content="US" />
<meta name="google-site-verification" content="OwOa7d5PaqW-onn8jNYsXe4e41PmLeqlpROSfwyKc40" />
</head>
<body>
<!-- Put a 100px margin on the left to match the img on the right. -->
<div style="float:left; width:100px; height:79px"></div>
<div style="float:right; width:100px; height:79px"><img src="images/zonk.png" style="float:right" width="100" height="79" alt="mithriltabby" /></div>
<h1 style="margin-bottom: 0; clear:none;">mithriltabby</h1>
<!-- hCard microformat -->
<div class="vcard">
  <p class="subhead"><i>
    <span class="n fn">
      <span class="given-name">Max</span>
      <span class="additional-name">Rible</span>
      <span class="family-name">Kaehn</span>
    </span>
  </i></p>
  <div class="geo hidden">
    <abbr class="latitude" title="37.38211">37°22’55.60” N</abbr>,
    <abbr class="longitude" title="-122.027965">122°1’40.67” W</abbr>
  </div>
  <!-- Put the short version of my name here in hopes of bringing up the
       rank on searches for “Max Kaehn”. -->
  <p class="hidden">Max Kaehn</p>
  <img class="photo hidden" src="http://www.mithriltabby.com/images/usericon.jpeg" alt="hCard photo" />

<!-- Hyperlinks to all my various online identities, with XFN notation
indicating that it’s me.  Need to include a hidden span of the actual
names, since XFN won’t figure it out from the title/alt of the images
I’m using.
-->
<p class="center">
<a class="url hidden" href="http://www.mithriltabby.com/">home</a>
<span class="hidden">•</span>
<a href="names.xhtml">names</a>
• <!-- Obfuscated email address in hopes of deterring spambots. -->
<a
class='email me'
href 
= '	
&#x20;&#x6D;&#x61;i&#x6C;­t&#111;&#x3a;&#32;&#x25;73&#37;6&#x63;&#x25;6ft&#x­68;%6d&#x25;61&#110;%40m%&#54;&#x39;&#x74;&#x25;68­r&#105;%&#x36;c%&#55;&#x34;&#97;&#x62;&#x62;&#37;7­&#x39;&#x25;&#x32;e&#x63;o&#109;?
'>em<!--
mailto:abuse@hotmail.com
</a>
-->ail</a>
•
<a href="vocation.xhtml">vocation</a>
•
<a rel="me" href="resume.xhtml">résumé</a>
•
<a href="avocation.xhtml">avocations</a>
•
<a href="input.xhtml">input</a>
•
<a href="output.xhtml">output</a>
•
<a href="technology.xhtml">technology</a>
•
<a href="politics.xhtml">politics</a>
•
<a href="metaphysics.xhtml">metaphysics</a>
</p>
</div> <!-- hCard -->

<p class="center">
<!-- When CSS3 is supported I can just use target-new: tab -->
<!-- Note when using CSS sprites:  if you don't put some sort of text,
even hidden text, inside the sprites, IE 8.0.6001.18702 (at least)
will size them incorrectly.  Hence all the hidden text even when I'm
not using XFN notation.
-->

<a rel="external me" href="http://slothman.livejournal.com/"
title="LiveJournal" class="sprite favicon"
style="background-position: -20px 0px;"><span class="hidden">LiveJournal</span></a>

<a rel="external me" href="http://mithriltabby.dreamwidth.org/"
title="DreamWidth" class="sprite favicon"
style="background-position: -100px -120px;"><span class="hidden">DreamWidth</span></a>

<a rel="external me" href="http://delicious.com/catslaugh"
title="delicious" class="sprite favicon"
style="background-position: -60px 0px;"><span class="hidden">delicious</span></a>

<a rel="external me" href="http://www.librarything.com/home/slothman"
title="LibraryThing" class="sprite favicon"
style="background-position: -40px 0px;"><span class="hidden">LibraryThing</span></a>

<a rel="external me" href="http://stackoverflow.com/users/9160/slothman"
title="Stack Overflow" class="sprite favicon"
style="background-position: -140px 0px;"><span class="hidden">Stack Overflow</span></a>

<a rel="external me" href="http://www.google.com/profiles/catslaugh"
title="Google" class="sprite favicon"
style="background-position: -100px 0px;"><span class="hidden">Google</span></a>

<a rel="external me" href="http://www.facebook.com/mithriltabby"
title="Facebook" class="sprite favicon"
style="background-position: -80px -0px;"><span class="hidden">Facebook</span></a>

<a rel="external me" href="http://twitter.com/mithriltabby"
title="Twitter" class="sprite favicon"
style="background-position: -100px -40px;"><span class="hidden">Twitter</span></a>

<a rel="external me" href="http://rateyourmusic.com/~slothman"
title="RateYourMusic" class="sprite favicon"
style="background-position: -140px -20px;"><span class="hidden">RateYourMusic</span></a>

<a rel="external me" href="http://www.flickr.com/people/catslaugh/"
title="Flickr" class="sprite favicon"
style="background-position: -160px 0px;"><span class="hidden">Flickr</span></a>

<a rel="external me" href="http://www.linkedin.com/in/slothman"
title="LinkedIn" class="sprite favicon"
style="background-position: -120px 0px;"><span class="hidden">LinkedIn</span></a>

<a rel="external me" href="http://mithriltabby.yelp.com/"
title="Yelp" class="sprite favicon"
style="background-position: -160px -40px;"><span class="hidden">Yelp</span></a>

<a rel="external me" href="http://www.youtube.com/profile?user=mithriltabby"
title="YouTube" class="sprite favicon"
style="background-position: -140px -40px;"><span class="hidden">YouTube</span></a>

<a rel="external me" href="http://my.barackobama.com/page/community/blog/gametheory"
title="my.BarackObama.com" class="sprite favicon"
style="background-position: -40px -20px;"><span class="hidden">my.barackobama.com</span></a>

<a rel="external me" href="http://profiles.yahoo.com/catslaugh"
title="Yahoo!" class="sprite favicon"
style="background-position: -60px -20px;"><span class="hidden">Yahoo!</span></a>

<a rel="external me"
href="http://www.icq.com/people/about_me.php?uin=293290025"
title="ICQ" class="sprite favicon"
style="background-position: -80px -20px;"><span class="hidden">ICQ</span></a>

<a rel="external me" href="http://slashdot.org/~catslaugh/"
title="Slashdot" class="sprite favicon"
style="background-position: -120px -40px;"><span class="hidden">Slashdot</span></a>

<a rel="external me" href="http://www.friendster.com/slothman"
title="Friendster" class="sprite favicon"
style="background-position: -180px -20px;"><span class="hidden">Friendster</span></a>

<a rel="external me" href="http://people.tribe.net/slothman"
title="Tribe" class="sprite favicon"
style="background-position: -180px -40px;"><span class="hidden">Tribe</span></a>

<a rel="external me" href="http://en.wikipedia.org/wiki/User:Catslaugh"
title="Wikipedia" class="sprite favicon"
style="background-position: -180px 0px;"><span class="hidden">Wikipedia</span></a>

<a rel="external me" href="http://www.freebase.com/view/user/slothman"
title="Freebase" class="sprite favicon"
style="background-position: -20px -20px;"><span class="hidden">Freebase</span></a>

<a rel="external me" href="http://www.imeem.com/mithriltabby/"
title="imeem" class="sprite favicon"
style="background-position: -160px -20px;"><span class="hidden">Imeem</span></a>

<a rel="external me" href="http://www.spock.com/Max-Rible-Kaehn-5OzR1NG"
title="Spock" class="sprite favicon"
style="background-position: -100px -20px;"><span class="hidden">Spock</span></a>

<a rel="external me" href="http://pulse.plaxo.com/pulse/profile/show/64426972784"
title="Plaxo" class="sprite favicon"
style="background-position: -120px -20px;"><span class="hidden">Plaxo</span></a>

</p>


<div id="rhs" style="float: right; width: 49%;">
<div id="bookmarks">
    <h3><a rel="external" href="http://feeds.delicious.com/rss/catslaugh"
class="sprite feedicon" title="RSS"><span class="hidden">RSS</span></a><a rel="external" href="http://delicious.com/catslaugh"><span class="sprite favicon" title="delicious"
style="background-position: -60px 0px; vertical-align: -10%;"><span class="hidden">delicious</span></span>
latest bookmarks</a></h3>
<noscript>
<p>You must enable JavaScript to see inlined content.</p>
</noscript>
</div>

<div id="flickr" class="center">
<h3><a rel="external"
href="http://api.flickr.com/services/feeds/photos_public.gne?id=11356736@N04&amp;lang=en-us&amp;format=rss_200"
class="sprite feedicon" title="RSS"><span class="hidden">RSS</span></a><a rel="external"
href="http://www.flickr.com/photos/catslaugh/"><span
class="sprite favicon" title="Flickr"
style="background-position: -160px 0px; vertical-align: -10%;"><span class="hidden">Flickr</span></span> latest flickr photos</a></h3>

<noscript>
<p>You must enable JavaScript to see inlined content.</p>
</noscript>
</div>

<div id="facebook" class="center">
<a rel="external" href="http://www.facebook.com/people/Max_Rible_Kaehn/622088563" title="Max Rible Kaehn's Facebook profile"><img style="padding: 3px" src="http://badge.facebook.com/badge/622088563.485.956290430.png" alt="Max Rible Kaehn's Facebook profile" /></a>
</div>

<div id="yelp" class="center">
<h3><a rel="external" href="http://www.yelp.com/syndicate/user/FBp-DAU1vtSLg7ipitLUVA/rss.xml"
class="sprite feedicon" title="RSS"><span class="hidden">RSS</span></a><a rel="external" href="http://www.yelp.com/user_details?userid=FBp-DAU1vtSLg7ipitLUVA"><span
class="sprite favicon" title="Yelp"
style="background-position: -160px -40px; vertical-align: -10%;"><span class="hidden">Yelp</span></span>
latest Yelp reviews</a></h3>

<!-- Yelp Badge based on the one at http://www.yelp.com/bling -->
  <div style="line-height: 1px">
    <div style="display: inline-block; width:350px; height:25px; overflow:hidden; line-height: 100%; background-image : url(http://static.px.yelp.com/bling_borders?color=C41200&amp;width=35­0&amp;BGcolor=CCCCCC&amp;position=top&amp;height=40) "><a rel="external" href="http://www.yelp.com"><img src="http://static.px.yelp.com/static/20090507a/i/new/p.gif" style="height: 20px; width: 40px; margin-top: 2px; margin-left: 155px; margin-right: 155px; border:none; " alt="Yelp" title="Yelp"/></a></div>

    <!-- Don’t set data yet; load JavaScript *after* the page layout is done. -->
    <object id="yelp-bling" style="border-width: 0px; width:350px; height:295px; overflow:hidden;" type="text/html">
    </object>
    <div style="display: inline-block; width:350px; height:15px; text-align : center; line-height: 100%; background-image : url(http://static.px.yelp.com/bling_borders?color=C41200&amp;width=35­0&amp;BGcolor=CCCCCC&amp;position=bottom&amp;height=15) "><a href="http://www.yelp.com/user_details?userid=FBp-DAU1vtSLg7ipitLUVA" style="font-family:arial; color:#FFFFFF !important; font-size: 12px !important; ">Recent reviews by Max Kaehn</a></div>
  </div>
</div> <!-- yelp -->

</div>

<div id="lhs" style="float: left; width: 49%;">
<div id="livejournal">
<h3><a rel="external" href="http://slothman.livejournal.com/data/rss" class="sprite feedicon" title="RSS"><span class="hidden">RSS</span></a><a rel="external" href="http://slothman.livejournal.com/"><span
class="sprite favicon" title="LiveJournal"
style="background-position: -20px 0px; vertical-align: -10%;"><span class="hidden">LiveJournal</span></span> latest blog posts</a></h3>
<noscript>
<p>You must enable JavaScript to see inlined content.</p>
</noscript>
</div>

<div id="twitter">
<h3><a rel="external" href="https://twitter.com/statuses/user_timeline/48087970.rss" class="sprite feedicon" title="RSS"><span class="hidden">RSS</span></a><a rel="external" href="http://twitter.com/mithriltabby"><span
class="sprite favicon" title="Twitter"
style="background-position: -100px -40px; vertical-align: -10%;"><span class="hidden">Twitter</span></span> latest tweets</a></h3>
<noscript>
<p>You must enable JavaScript to see inlined content.</p>
</noscript>
</div>

<!--
<div id="reading" class="center">
<h3>currently reading</h3>
<noscript>
<p>You must enable JavaScript to see inlined content.</p>
</noscript>
</div>
-->
<div id="reviews" class="center">
<h3><a rel="external" href="http://www.librarything.com/rss/reviews/slothman"
class="sprite feedicon" title="RSS"><span class="hidden">LibraryThing</span></a><a rel="external" href="http://www.librarything.com/profile_reviews.php?view=slothman"><span
class="sprite favicon" title="LibraryThing"
style="background-position: -40px 0px; vertical-align: -10%;"><span class="hidden">RSS</span></span>
latest reviewed books</a></h3>
<noscript>
<p>You must enable JavaScript to see inlined content.</p>
</noscript>
</div>
<div id="acquisitions" class="center">
<h3><a rel="external" href="http://www.librarything.com/catalog/slothman&amp;sort=stamp"><span
class="sprite favicon" title="LibraryThing"
style="background-position: -40px 0px; vertical-align: -10%;"><span class="hidden">LibraryThing</span></span>
recent acquisitions</a></h3>
<noscript>
<p>You must enable JavaScript to see inlined content.</p>
</noscript>
</div>

</div> <!-- lhs -->

<div style="clear: both; padding-top: 1em;"></div>
<div class="flow"><a href="http://validator.w3.org/check?uri=referer"
      class="sprite" rel="external"
      style="border:0;width:88px;height:31px;background-position:0px -80px"
      title="Valid XHTML 1.1"><span class="hidden">Valid XHTML 1.1</span></a></div>
<div class="flow"><a href="http://jigsaw.w3.org/css-validator/check/referer/"
      class="sprite" rel="external"
      style="border:0;width:88px;height:31px;background-position:-100px -80px"
      title="Valid CSS!" ><span class="hidden">Valid CSS</span></a></div>
<div class="flow"><a href="http://www.spreadfirefox.com/node&amp;id=0&amp;t=314"
      class="sprite" rel="external"
      style="border:0;width:88px;height:31px;background-position:0px -120px"
      title="Firefox 3"><span class="hidden">Get Firefox!</span></a></div>


<div class="flow"><a
href="http://feedvalidator.org/check.cgi?url=http%3A//www.mithriltabby.com/mainecoonmanor.kml"
class="sprite" rel="external"
style="border:0;width:36px;height:36px;background-position:0px -160px"
title="Validate my KML 2.2 feed"><span class="hidden">Valid KML</span></a></div>

<div class="flow"><a
href="http://geourl.org/near?p=http://www.mithriltabby.com"
rel="external" class="sprite"
style="width:52px;height:14px;background-position: -100px -60px;"
title="My neighbors in the physical world"><span class="hidden">GeoURL</span></a></div>

<div class="flow"><a rel="me" href="xfn.xhtml"
class="sprite" title="XFN Friendly"
style="width:80px;height:15px;background-position:0px -60px;"><span
class="hidden">XFN Links</span></a></div>

<div class="flow"><a href="http://microformats.org/profile/hcard"
class="sprite" title="hCard"
style="width:80px;height:15px;background-position:0px -40px;"><span class="hidden">hCard</span></a></div>

<!-- Do all the heavy-duty JavaScript work at the bottom, after the
     rest of the page has rendered. -->

<!-- Load Delicious data into JavaScript. -->
<script type="text/javascript" 
        src="http://delicious.com/feeds/json/catslaugh?count=10"></script>

<!-- Pull in LJ data. -->
<script type="text/javascript" 
        src="http://slothman.livejournal.com/?s2id=22480769"></script>

<!-- Inline the Delicious and LiveJournal content and create the routines
     for LibraryThing to call. -->
<script type="text/javascript" src="inline.js">
</script>

<!-- Call LibraryThing; it will invoke routines in inline.js -->
<!--
<script type="text/javascript"
        src="http://www.librarything.com/api/json_books.php?userid=slothman&amp;key=1­501478823&amp;max=5&amp;booksort=entry_REV&amp;res­ultsets=books&amp;callback=reading">
</script>
-->
<script type="text/javascript"
        src="http://www.librarything.com/api/json_books.php?userid=slothman&amp;key=1­501478823&amp;limit=reviews&amp;max=10&amp;booksor­t=entry_REV&amp;resultsets=books,bookratings&amp;callback=bookreview">
</script>
<script type="text/javascript"
        src="http://www.librarything.com/api/json_books.php?userid=slothman&amp;key=1­501478823&amp;max=15&amp;booksort=entry_REV&amp;re­sultsets=books&amp;callback=acquisition">
</script>

<!-- Bring in data from Flickr. -->
<script type="text/javascript" src="http://api.flickr.com/services/rest/?method=flickr.people.getP­ublicPhotos&amp;api_key=acb06895a9e58623a05c0ef0f4­f56fd1&amp;user_id=11356736@N04&amp;extras=date_ta­ken&amp;per_page=10&amp;pages=1&amp;format=json"></script>

<!-- Pull in my Twitter feed. -->
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline.json?user_id=48087970&amp;scre­en_name=mithriltabby&amp;count=10&amp;skip_user=true&amp;callback=tweet"></script>

<!-- Load the Yelp bling. -->
<script type="text/javascript">
document.getElementById('yelp-bling').setAttribute('data', 'http://www.yelp.com/blogbadgemap?v=2&amp;userid=FBp-DAU1vtSLg7ipitLUVA&amp;wi­dth=350&amp;height=295&amp;uicolor=C41200&amp;text­color=FFFFFF&amp;type=latest&amp;speed=0');
</script>

</body></html>

Parsed source

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head profile="http://microformats.org/profile/specs/"><title>mithriltabby - Max Kaehn’s home page</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
<!-- Specifying UTF-8 in the HTTP headers doesn't persuade IE to use UTF-8. -->
<!--[if IE]>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->
<link rel="icon" type="image/png" href="images/zonk16x16.png"/>
<link rev="made" href="http://www.mithriltabby.com/"/>
<script type="text/javascript" src="code.js">
<!-- Can't use <script/> because I have to be able to serve this up to
Internet Exploder as text/html. -->
</script>

<link rel="home start contents" href="/"/>
<link rel="next" href="names.xhtml"/>
<link rel="meta" type="application/rdf+xml" title="FOAF" href="foaf.rdf"/>
<link rel="feed" href="http://slothman.livejournal.com/data/rss" type="application/rss+xml" title="LiveJournal"/>
<link rel="feed" href="http://feeds.delicious.com/rss/catslaugh" type="application/rss+xml" title="Delicious links"/>
<link rel="feed" href="https://twitter.com/statuses/user_timeline/48087970.rss" type="application/rss+xml" title="Twitter"/>
<link rel="feed" href="http://buzz.googleapis.com/feeds/106375266620508099787/public/posted" type="application/rss+xml" title="Google Buzz"/>
<link rel="feed" href="http://api.flickr.com/services/feeds/photos_public.gne?id=11356736@N04&amp;lang=en-us&amp;format=rss_200" type="application/rss+xml" title="Flickr"/>
<link rel="feed" href="http://www.librarything.com/rss/reviews/slothman" type="application/rss+xml" title="LibraryThing reviews"/>
<link rel="feed" href="http://www.yelp.com/syndicate/user/FBp-DAU1vtSLg7ipitLUVA/rss.xml" type="application/rss+xml" title="Yelp reviews"/>
<!-- http://wiki.whatwg.org/wiki/RelExtensions -->
<link rel="pronunciation" href="lexicon.xml"/>
<meta name="description" content="The home page of Max Kaehn."/>
<meta name="keywords" content="Max Rible Kaehn, Max Kaehn, Max Rible"/>
<meta name="author" content="Max Rible Kaehn"/>
<meta name="ICBM" content="37.38211, -122.027965"/>
<meta name="geo.position" content="37.38211;-122.027965"/>
<meta name="geo.placename" content="Maine Coon Manor, Sunnyvale, CA, US"/>
<meta name="geo.region" content="US"/>
<meta name="google-site-verification" content="OwOa7d5PaqW-onn8jNYsXe4e41PmLeqlpROSfwyKc40"/>
</head>
<body>
<!-- Put a 100px margin on the left to match the img on the right. -->
<div style="float:left; width:100px; height:79px"/>
<div style="float:right; width:100px; height:79px"><img src="images/zonk.png" style="float:right" width="100" height="79" alt="mithriltabby"/></div>
<h1 style="margin-bottom: 0; clear:none;">mithriltabby</h1>
<!-- hCard microformat -->
<div class="vcard">
  <p class="subhead"><i>
    <span class="n fn">
      <span class="given-name">Max</span>
      <span class="additional-name">Rible</span>
      <span class="family-name">Kaehn</span>
    </span>
  </i></p>
  <div class="geo hidden">
    <abbr class="latitude" title="37.38211">37°22’55.60” N</abbr>,
    <abbr class="longitude" title="-122.027965">122°1’40.67” W</abbr>
  </div>
  <!-- Put the short version of my name here in hopes of bringing up the
       rank on searches for “Max Kaehn”. -->
  <p class="hidden">Max Kaehn</p>
  <img class="photo hidden" src="http://www.mithriltabby.com/images/usericon.jpeg" alt="hCard photo"/>

<!-- Hyperlinks to all my various online identities, with XFN notation
indicating that it’s me.  Need to include a hidden span of the actual
names, since XFN won’t figure it out from the title/alt of the images
I’m using.
-->
<p class="center">
<a class="url hidden" href="http://www.mithriltabby.com/">home</a>
<span class="hidden">•</span>
<a href="names.xhtml">names</a>
• <!-- Obfuscated email address in hopes of deterring spambots. -->
<a class="email me" href="   mailto: %73%6c%6fth%6d%61n%40m%69t%68ri%6c%74abb%79%2ecom? ">em<!--
mailto:abuse@hotmail.com
</a>
-->ail</a>
•
<a href="vocation.xhtml">vocation</a>
•
<a rel="me" href="resume.xhtml">résumé</a>
•
<a href="avocation.xhtml">avocations</a>
•
<a href="input.xhtml">input</a>
•
<a href="output.xhtml">output</a>
•
<a href="technology.xhtml">technology</a>
•
<a href="politics.xhtml">politics</a>
•
<a href="metaphysics.xhtml">metaphysics</a>
</p>
</div> <!-- hCard -->

<p class="center">
<!-- When CSS3 is supported I can just use target-new: tab -->
<!-- Note when using CSS sprites:  if you don't put some sort of text,
even hidden text, inside the sprites, IE 8.0.6001.18702 (at least)
will size them incorrectly.  Hence all the hidden text even when I'm
not using XFN notation.
-->

<a rel="external me" href="http://slothman.livejournal.com/" title="LiveJournal" class="sprite favicon" style="background-position: -20px 0px;"><span class="hidden">LiveJournal</span></a>

<a rel="external me" href="http://mithriltabby.dreamwidth.org/" title="DreamWidth" class="sprite favicon" style="background-position: -100px -120px;"><span class="hidden">DreamWidth</span></a>

<a rel="external me" href="http://delicious.com/catslaugh" title="delicious" class="sprite favicon" style="background-position: -60px 0px;"><span class="hidden">delicious</span></a>

<a rel="external me" href="http://www.librarything.com/home/slothman" title="LibraryThing" class="sprite favicon" style="background-position: -40px 0px;"><span class="hidden">LibraryThing</span></a>

<a rel="external me" href="http://stackoverflow.com/users/9160/slothman" title="Stack Overflow" class="sprite favicon" style="background-position: -140px 0px;"><span class="hidden">Stack Overflow</span></a>

<a rel="external me" href="http://www.google.com/profiles/catslaugh" title="Google" class="sprite favicon" style="background-position: -100px 0px;"><span class="hidden">Google</span></a>

<a rel="external me" href="http://www.facebook.com/mithriltabby" title="Facebook" class="sprite favicon" style="background-position: -80px -0px;"><span class="hidden">Facebook</span></a>

<a rel="external me" href="http://twitter.com/mithriltabby" title="Twitter" class="sprite favicon" style="background-position: -100px -40px;"><span class="hidden">Twitter</span></a>

<a rel="external me" href="http://rateyourmusic.com/~slothman" title="RateYourMusic" class="sprite favicon" style="background-position: -140px -20px;"><span class="hidden">RateYourMusic</span></a>

<a rel="external me" href="http://www.flickr.com/people/catslaugh/" title="Flickr" class="sprite favicon" style="background-position: -160px 0px;"><span class="hidden">Flickr</span></a>

<a rel="external me" href="http://www.linkedin.com/in/slothman" title="LinkedIn" class="sprite favicon" style="background-position: -120px 0px;"><span class="hidden">LinkedIn</span></a>

<a rel="external me" href="http://mithriltabby.yelp.com/" title="Yelp" class="sprite favicon" style="background-position: -160px -40px;"><span class="hidden">Yelp</span></a>

<a rel="external me" href="http://www.youtube.com/profile?user=mithriltabby" title="YouTube" class="sprite favicon" style="background-position: -140px -40px;"><span class="hidden">YouTube</span></a>

<a rel="external me" href="http://my.barackobama.com/page/community/blog/gametheory" title="my.BarackObama.com" class="sprite favicon" style="background-position: -40px -20px;"><span class="hidden">my.barackobama.com</span></a>

<a rel="external me" href="http://profiles.yahoo.com/catslaugh" title="Yahoo!" class="sprite favicon" style="background-position: -60px -20px;"><span class="hidden">Yahoo!</span></a>

<a rel="external me" href="http://www.icq.com/people/about_me.php?uin=293290025" title="ICQ" class="sprite favicon" style="background-position: -80px -20px;"><span class="hidden">ICQ</span></a>

<a rel="external me" href="http://slashdot.org/~catslaugh/" title="Slashdot" class="sprite favicon" style="background-position: -120px -40px;"><span class="hidden">Slashdot</span></a>

<a rel="external me" href="http://www.friendster.com/slothman" title="Friendster" class="sprite favicon" style="background-position: -180px -20px;"><span class="hidden">Friendster</span></a>

<a rel="external me" href="http://people.tribe.net/slothman" title="Tribe" class="sprite favicon" style="background-position: -180px -40px;"><span class="hidden">Tribe</span></a>

<a rel="external me" href="http://en.wikipedia.org/wiki/User:Catslaugh" title="Wikipedia" class="sprite favicon" style="background-position: -180px 0px;"><span class="hidden">Wikipedia</span></a>

<a rel="external me" href="http://www.freebase.com/view/user/slothman" title="Freebase" class="sprite favicon" style="background-position: -20px -20px;"><span class="hidden">Freebase</span></a>

<a rel="external me" href="http://www.imeem.com/mithriltabby/" title="imeem" class="sprite favicon" style="background-position: -160px -20px;"><span class="hidden">Imeem</span></a>

<a rel="external me" href="http://www.spock.com/Max-Rible-Kaehn-5OzR1NG" title="Spock" class="sprite favicon" style="background-position: -100px -20px;"><span class="hidden">Spock</span></a>

<a rel="external me" href="http://pulse.plaxo.com/pulse/profile/show/64426972784" title="Plaxo" class="sprite favicon" style="background-position: -120px -20px;"><span class="hidden">Plaxo</span></a>

</p>


<div id="rhs" style="float: right; width: 49%;">
<div id="bookmarks">
    <h3><a rel="external" href="http://feeds.delicious.com/rss/catslaugh" class="sprite feedicon" title="RSS"><span class="hidden">RSS</span></a><a rel="external" href="http://delicious.com/catslaugh"><span class="sprite favicon" title="delicious" style="background-position: -60px 0px; vertical-align: -10%;"><span class="hidden">delicious</span></span>
latest bookmarks</a></h3>
<noscript>
<p>You must enable JavaScript to see inlined content.</p>
</noscript>
</div>

<div id="flickr" class="center">
<h3><a rel="external" href="http://api.flickr.com/services/feeds/photos_public.gne?id=11356736@N04&amp;lang=en-us&amp;format=rss_200" class="sprite feedicon" title="RSS"><span class="hidden">RSS</span></a><a rel="external" href="http://www.flickr.com/photos/catslaugh/"><span class="sprite favicon" title="Flickr" style="background-position: -160px 0px; vertical-align: -10%;"><span class="hidden">Flickr</span></span> latest flickr photos</a></h3>

<noscript>
<p>You must enable JavaScript to see inlined content.</p>
</noscript>
</div>

<div id="facebook" class="center">
<a rel="external" href="http://www.facebook.com/people/Max_Rible_Kaehn/622088563" title="Max Rible Kaehn's Facebook profile"><img style="padding: 3px" src="http://badge.facebook.com/badge/622088563.485.956290430.png" alt="Max Rible Kaehn's Facebook profile"/></a>
</div>

<div id="yelp" class="center">
<h3><a rel="external" href="http://www.yelp.com/syndicate/user/FBp-DAU1vtSLg7ipitLUVA/rss.xml" class="sprite feedicon" title="RSS"><span class="hidden">RSS</span></a><a rel="external" href="http://www.yelp.com/user_details?userid=FBp-DAU1vtSLg7ipitLUVA"><span class="sprite favicon" title="Yelp" style="background-position: -160px -40px; vertical-align: -10%;"><span class="hidden">Yelp</span></span>
latest Yelp reviews</a></h3>

<!-- Yelp Badge based on the one at http://www.yelp.com/bling -->
  <div style="line-height: 1px">
    <div style="display: inline-block; width:350px; height:25px; overflow:hidden; line-height: 100%; background-image : url(http://static.px.yelp.com/bling_borders?color=C41200&amp;width=35­0&amp;BGcolor=CCCCCC&amp;position=top&amp;height=40) "><a rel="external" href="http://www.yelp.com"><img src="http://static.px.yelp.com/static/20090507a/i/new/p.gif" style="height: 20px; width: 40px; margin-top: 2px; margin-left: 155px; margin-right: 155px; border:none; " alt="Yelp" title="Yelp"/></a></div>

    <!-- Don’t set data yet; load JavaScript *after* the page layout is done. -->
    <object id="yelp-bling" style="border-width: 0px; width:350px; height:295px; overflow:hidden;" type="text/html">
    </object>
    <div style="display: inline-block; width:350px; height:15px; text-align : center; line-height: 100%; background-image : url(http://static.px.yelp.com/bling_borders?color=C41200&amp;width=35­0&amp;BGcolor=CCCCCC&amp;position=bottom&amp;height=15) "><a href="http://www.yelp.com/user_details?userid=FBp-DAU1vtSLg7ipitLUVA" style="font-family:arial; color:#FFFFFF !important; font-size: 12px !important; ">Recent reviews by Max Kaehn</a></div>
  </div>
</div> <!-- yelp -->

</div>

<div id="lhs" style="float: left; width: 49%;">
<div id="livejournal">
<h3><a rel="external" href="http://slothman.livejournal.com/data/rss" class="sprite feedicon" title="RSS"><span class="hidden">RSS</span></a><a rel="external" href="http://slothman.livejournal.com/"><span class="sprite favicon" title="LiveJournal" style="background-position: -20px 0px; vertical-align: -10%;"><span class="hidden">LiveJournal</span></span> latest blog posts</a></h3>
<noscript>
<p>You must enable JavaScript to see inlined content.</p>
</noscript>
</div>

<div id="twitter">
<h3><a rel="external" href="https://twitter.com/statuses/user_timeline/48087970.rss" class="sprite feedicon" title="RSS"><span class="hidden">RSS</span></a><a rel="external" href="http://twitter.com/mithriltabby"><span class="sprite favicon" title="Twitter" style="background-position: -100px -40px; vertical-align: -10%;"><span class="hidden">Twitter</span></span> latest tweets</a></h3>
<noscript>
<p>You must enable JavaScript to see inlined content.</p>
</noscript>
</div>

<!--
<div id="reading" class="center">
<h3>currently reading</h3>
<noscript>
<p>You must enable JavaScript to see inlined content.</p>
</noscript>
</div>
-->
<div id="reviews" class="center">
<h3><a rel="external" href="http://www.librarything.com/rss/reviews/slothman" class="sprite feedicon" title="RSS"><span class="hidden">LibraryThing</span></a><a rel="external" href="http://www.librarything.com/profile_reviews.php?view=slothman"><span class="sprite favicon" title="LibraryThing" style="background-position: -40px 0px; vertical-align: -10%;"><span class="hidden">RSS</span></span>
latest reviewed books</a></h3>
<noscript>
<p>You must enable JavaScript to see inlined content.</p>
</noscript>
</div>
<div id="acquisitions" class="center">
<h3><a rel="external" href="http://www.librarything.com/catalog/slothman&amp;sort=stamp"><span class="sprite favicon" title="LibraryThing" style="background-position: -40px 0px; vertical-align: -10%;"><span class="hidden">LibraryThing</span></span>
recent acquisitions</a></h3>
<noscript>
<p>You must enable JavaScript to see inlined content.</p>
</noscript>
</div>

</div> <!-- lhs -->

<div style="clear: both; padding-top: 1em;"/>
<div class="flow"><a href="http://validator.w3.org/check?uri=referer" class="sprite" rel="external" style="border:0;width:88px;height:31px;background-position:0px -80px" title="Valid XHTML 1.1"><span class="hidden">Valid XHTML 1.1</span></a></div>
<div class="flow"><a href="http://jigsaw.w3.org/css-validator/check/referer/" class="sprite" rel="external" style="border:0;width:88px;height:31px;background-position:-100px -80px" title="Valid CSS!"><span class="hidden">Valid CSS</span></a></div>
<div class="flow"><a href="http://www.spreadfirefox.com/node&amp;id=0&amp;t=314" class="sprite" rel="external" style="border:0;width:88px;height:31px;background-position:0px -120px" title="Firefox 3"><span class="hidden">Get Firefox!</span></a></div>


<div class="flow"><a href="http://feedvalidator.org/check.cgi?url=http%3A//www.mithriltabby.com/mainecoonmanor.kml" class="sprite" rel="external" style="border:0;width:36px;height:36px;background-position:0px -160px" title="Validate my KML 2.2 feed"><span class="hidden">Valid KML</span></a></div>

<div class="flow"><a href="http://geourl.org/near?p=http://www.mithriltabby.com" rel="external" class="sprite" style="width:52px;height:14px;background-position: -100px -60px;" title="My neighbors in the physical world"><span class="hidden">GeoURL</span></a></div>

<div class="flow"><a rel="me" href="xfn.xhtml" class="sprite" title="XFN Friendly" style="width:80px;height:15px;background-position:0px -60px;"><span class="hidden">XFN Links</span></a></div>

<div class="flow"><a href="http://microformats.org/profile/hcard" class="sprite" title="hCard" style="width:80px;height:15px;background-position:0px -40px;"><span class="hidden">hCard</span></a></div>

<!-- Do all the heavy-duty JavaScript work at the bottom, after the
     rest of the page has rendered. -->

<!-- Load Delicious data into JavaScript. -->
<script type="text/javascript" src="http://delicious.com/feeds/json/catslaugh?count=10"/>

<!-- Pull in LJ data. -->
<script type="text/javascript" src="http://slothman.livejournal.com/?s2id=22480769"/>

<!-- Inline the Delicious and LiveJournal content and create the routines
     for LibraryThing to call. -->
<script type="text/javascript" src="inline.js">
</script>

<!-- Call LibraryThing; it will invoke routines in inline.js -->
<!--
<script type="text/javascript"
        src="http://www.librarything.com/api/json_books.php?userid=slothman&amp;key=1­501478823&amp;max=5&amp;booksort=entry_REV&amp;res­ultsets=books&amp;callback=reading">
</script>
-->
<script type="text/javascript" src="http://www.librarything.com/api/json_books.php?userid=slothman&amp;key=1­501478823&amp;limit=reviews&amp;max=10&amp;booksor­t=entry_REV&amp;resultsets=books,bookratings&amp;callback=bookreview">
</script>
<script type="text/javascript" src="http://www.librarything.com/api/json_books.php?userid=slothman&amp;key=1­501478823&amp;max=15&amp;booksort=entry_REV&amp;re­sultsets=books&amp;callback=acquisition">
</script>

<!-- Bring in data from Flickr. -->
<script type="text/javascript" src="http://api.flickr.com/services/rest/?method=flickr.people.getP­ublicPhotos&amp;api_key=acb06895a9e58623a05c0ef0f4­f56fd1&amp;user_id=11356736@N04&amp;extras=date_ta­ken&amp;per_page=10&amp;pages=1&amp;format=json"/>

<!-- Pull in my Twitter feed. -->
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline.json?user_id=48087970&amp;scre­en_name=mithriltabby&amp;count=10&amp;skip_user=true&amp;callback=tweet"/>

<!-- Load the Yelp bling. -->
<script type="text/javascript">
document.getElementById('yelp-bling').setAttribute('data', 'http://www.yelp.com/blogbadgemap?v=2&amp;userid=FBp-DAU1vtSLg7ipitLUVA&amp;wi­dth=350&amp;height=295&amp;uicolor=C41200&amp;text­color=FFFFFF&amp;type=latest&amp;speed=0');
</script>

</body></html>

Credits

Written by . Icons are from Tango Icon Library. Test cases include hCard Acid test by Dmitry Baranovskiy, examples from microformats.org and hCard test suite.

Source code is available under the BSD license.

¹ It's not a validator in the XML/SGML sense.