toolbox: Give Yourself a URI with Hcard

Summary

  1. Use to describe yourself on a web page
  2. People are more important than computers.
  3. The “person” datatype, and implications for Search
  4. Presenting Hcard
  5. Hello World
  6. Hcard Demystified

Using an hcard on your web page helps search engines learn more about you, can help people find your site, improves the computing ecosystem, and makes it easier for people to keep their contact information up to date. It’s trivially easy to enrich your web pages with hcard, because it has only two rules: you must add two class names as a minimum, and you must list the name of the person being described. This post explains why this is important, how to add one to your site, and how to represent all kinds of information about the person.

People Are More Important than Computers

About a year ago, Timbl, the inventor of the web, advocated giving yourself a URI. There are a number of reasons why this is a good idea, and they arise from examining some philosophical principles. I’d like to examine a few of these, since they greatly shape my own methodology in the practice of computer science.

The Knuth school of thought posits that the chief consumer of of souce code is other humans. The WWWA posits that everything of importance deserves a URI. I’ve been greatly influenced in my ideas on usability by Jef Raskin, Bruce Tognazzini, Jakob Nielsen, and especially Don Norman.

When you add all of this together, you arrive at some interesting conclusions (at least in my head). My conclusion is that People are more important that computers.

Importance of the Person Datatype

The concept of a person must be one of the most important data types in existence. When I think of the basic questions that can be asked of something, the list goes “Who, What, When, Where, Why”. “WHO” is the first one in the list. When meet new people, the first piece of information conveyed is usually their name. Introductions seems awkward when the name of the person is left out. When we’re invited to an event, the first question often asked is “who else is going?” When a criminal is on the run, one of the first things they change is their name. When government operatives attempt to enforce justice, or protect the innocent, the information they trade is typically the names of people.

Searching for People

It’s highly likely that most people that have read this blog have also had a hand in creating technology, and probably has a website or blog of their own. If this is true, you’ve probably created web pages to represent lots of things: products, ideas, even other people. When you mark up people, it’s important to mark them up in such a way that search engines will be able to understand them.

I don’t have any empirical evidence, but I’ve noticed that whenever a list of popular search queries are presented, names of people typically compose at least 50% of the list. This suggests that at least half of all search queries are performed by searching for people. If only there was a mechanism for website authors and publishers to clearly describe people to computers, so that computers could have a way to address those people.

Presenting HCard

The addressing bit is easy, that technology is capably provided by URIs. The human consumption part is also easy, it’s already done in the form of the rendered HTML page. The only part of the triad missing is the technology to describe people to computers. Oh wait, we’ve got that too.

It’s called hcard, it is a type of microformat, and it makes it possible to describe people to computers in the same way and in the same place that you describe people to other people. It’s also really easy. The simplest way to create an hcard is to add two class names to your html.

Trivial HCard Demo

Let’s say you have a paragraph that mentions someone’s name. This paragraph might look like:

<p>This is a paragraph about Ben West.<p>

This is trivial to add an hcard:

<p class="vcard">This is a paragraph about <span class="n">Ben West<span>.<>

That’s the minimum amount of effort it takes to create an hcard. There are a couple of important things to notice, even in this simple “Hello World”-style example.

  • The page will look exactly the same before and after you added an hcard.
  • The extra bits required to turn the example into an hcard is located are in the same place the information for humans is located.
  • The extra bits already look familiar, a couple of class names, and a span tag. These components are already well known because they are also used for CSS.
  • There are two class names: vcard, and n. The vcard is on an element that is an “ancestor” (in this case a parent) of the element that contains my name. This is one of few requirements of hcard.
  • While I used “p”, and “span” tags, any tag is valid. The important thing is that the “n” property is inside the element marked as a “vcard”.
  • A computer interpreting this hcard would know that there is person named “Ben West”. In the before example it would be extremely difficult to get a computer to guess that a person is mentioned in the paragraph.

The names “vcard”, and “n” might seem a bit strange. “n” stands for “name”, and “vcard” stands for… well, I don’t know what it stands for (maybe “virtual card”??). However, I do know where it came from and how it was chosen. The group that codified hcard believes that software re-use is a Good Thing(TM). They looked around for other standards, that already existed, that also described people. They found the icalendar standard, used by popular software such as Outlook, and ical, and many types of calendar and email software. They decided to re-use as many names from this standard as possible, and that is why some of the names may appear to be a little strange. However, it turns out that this is a feature, because there are free services that can add people found in a web page to your contacts list in Outlook, or other favorite mail software.

When “vcard” shows up in a class name (the class attribute takes a space delimited set of class names, not just one!), a computer that is looking at this web page can tell that this might be an hcard. It might not be, and there are guidelines to figure out whether or not it is. In this case, for example, a computer would be able to tell that this is an hcard because one of the children of this element has a class of “n”, which is the one of the properties that compose an hcard. In addition, “n” is a special property, because it is the only one required by hcard.

That was a really trivial example, so we’ll move on to a more exciting example. In real life you might want to describe the person in further detail. You might want to show an address, or the phone number, an email address, a home page, a description, etc… to explain more things about a person. However, if all you want to show is the name, and/or if the only information you possess is the name of a person, the example above is perfectly valid. Names are important, and if all you have is the name, it’s a good idea to put it inside an hcard.

Complex Hcard Demo

If you do have more information about a person, and you want to encode it in an hcard, we can do that in a similar fashion to the example above. The same properties will also be evident: the mechanism to encode this information is located in the same place as the information displayed (meaning it is impossible for the two to get out of sync: what the computer interprets will be the same as what a human reads), the addition of some class names is all it takes, the class name can be on any element, and “vcard” will appear on an element that is a parent or ancestor of the other properties.

<p class="vcard">
  Hi, my name is <span="fn">Ben West</span> and you can learn more about me on
  <a class="url" href="http://www.siliconllama.com/">my defunct website.</a>,
  or by reading <a class="url" href="https://bewest.wordpress.com/">my geeky blog</a>. 
  <span class="note">I have a degree in music, and like to sing, play piano, and conduct, among other musical activities.  I work for <a class="org" href="http://www.alexa.com/">Alexa Internet</a> a search engine company, where I develop web services to support user interfaces designed by co-workers, and implemented in collaborative processes.  I advocate web standards, and user-centric software design.  I'm <span class="age">25</span> years old, and less than a year ago, I moved from New Jersey to <span class="adr"><span class="locality">San Francisco</span>, <span class="region">California</span></span>.  I'm often bored and spend too much time on the computer to alleviate this boredom.  If you like to go to classical music concerts, make beautiful music, go to museums, go hiking, snowboard or ski, want to learn how to hanglide, like to sit around and code, or brainstorm, let me know.</span>
<p>

Which would look like:

Hi, my name is Ben West and you can learn more about me on my defunct website., or by reading my geeky blog. I have a degree in music, and like to sing, play piano, and conduct, among other musical activities. I work for Alexa Internet a search engine company, where I develop web services to support user interfaces designed by co-workers, and implemented in collaborative processes. I advocate web standards, and user-centric software design. I’m 25 years old, and less than a year ago, I moved from New Jersey to San Francisco, California. I’m often bored and spend too much time on the computer to alleviate this boredom. If you like to go to classical music concerts, make beautiful music, go to museums, go hiking, snowboard or ski, want to learn how to hanglide, like to sit around and code, or brainstorm, let me know.

HCard: Demystified

This hcard tells both humans and computers that there is a person named Ben West who has two websites, is part of Alexa Internet, can be found in San Francisco, California, with an additional note about what he like to do. In this particular case, “fn” is synonymous with “n”. The exact meaning of these attributes is mostly explained in the Hcard Spec, as well as the adr spec. The latter is used to describe addresses, and you might notice that the same pattern where one class name appears on a “root” element is re-used. These specs aren’t intended as tutorials, so your help in explaining the techniques, blogging about microformats, and even restructuring the information so it’s easy to understand is greatly desired.

You might notice I also specified my age with class=”age”. This isn’t part of the microformat. However, it also isn’t harmful to do so. You can add semantic html to or around any microformat. Microformats are intended to codify how authors are already publishing on the web. If the number of people publishing some piece of data reachs what we call the “80/20” threshold, we’ll add it in to the spec as an official part of the microformat. Don’t restrain yourself to just the official values. Software and other authors can take advantage of your ideas.

The hcard microformat is capable of rich expression of a number of different properties. If you don’t find the one you want to express, you can express it anyway using semantic html, just like I did with age. If you’d like to see all the things hcard is capable of representing, I suggest you check out the spec, or you can try out the hcard interactive creator to see how the properties work together with real html.

Giving yourself a URI

These techniques allow search engines to do really smart things with your search queries, and it is only a matter of time until neat features start showing up in search engines. Being a part of that will help your users find your information more easily. If you write software, please publish all names as microformats whenever possible. If you are an author/blogger/website owner, including an hcard can make your site more easily found, and with greater authority, when people search for your name. I suggest, as Timbl did, that you add an id to your hcard, so that the URI can represent you as a person, instead of the web page as a resource. However, I believe hcard is a much more sensible choice over foaf, because the code is located in the same place as the html, where work is reused, and the data fidelity is uncompromised using techniques with which most publishers are already familiar.

Advertisements

2 Comments

  1. kabababrubarta
    Posted March 27, 2007 at 12:11 am | Permalink

    Good site! kabababrubarta

  2. Posted September 1, 2008 at 3:49 am | Permalink

    Hi!,


One Trackback/Pingback

  1. […] microformats, chyba nie do końca zrozumiałem o co chodzi… wyśledzeniu Tag Serferem tego posta okazuje się, że teraz znów chodzi o połączenie danych i metadanych w jednym […]

Post a Comment

Required fields are marked *
*
*

%d bloggers like this: