HOWTO: A home page

Jane has lots of friends, family and work colleagues with which she would like to stay in touch during her busy schedule. She would like to set up a home-page for herself, where people who know her can find useful contact information, such as her phone number or work email.

Setting up the web-page

Jane's first stop is to create a page that contains information about her that can be read by anyone using a web browser. She begins with some details for people who might be trying to contact her at work:

<html>
  <head>
    <title>Jane Doe's Home Page</title>
  </head>
  <body>
    <p>
      Hello. This is Jane Doe's home page.
      <h2>Work</h2>
      If you want to contact me at work, you can
      either <a href="mailto:jane.doe@example.org">email
      me</a>, or call +1 777 888 9999.
    </p>
  </body>
</html>

Jane can now pass on the address of her home-page to her friends, which is http://jo-lambda.example.org/.

Adding name and contact metadata

One of Jane's friends, John, tells Jane that the address book software he uses can be automatically kept up-to-date with Jane's details. All Jane needs to do is to add some tags to her home page to help the system understand her data. The tags that Terri's address book understands
come from a special list--often called a vocabulary--specifically for describing relationships between people. The particular vocabulary she is going to use is called 'Friend-of-a-friend', or FoaF.

The first thing that Jane needs to do is to add an identifier to the top of her home-page that will make the FoaF vocabulary available:

<html xmlns:foaf="http://xmlns.com/foaf/0.1/">

Jane then looks through the FoaF vocabulary, and sees that the pieces of information that she has in her page--name, phone number and email address--all have special names within FoaF. She therefore adds those names to her document, using the following approach:

if the value she wants to use for a property is in the href attribute of an a element, then the rel attribute can be added to the element, and its value is set to contain the name of the property she wants to add;
if the value to be used for a property that she wants to add doesn't have an element to contain it, then one must be added;
the name of the property used to describe the contents of an element is placed in an attribute called property.

Let's look at each of those rules.

Using URLs as property values

Jane has provided a link in her home-page to her email address, which is jane.doe@example.org:

      .
      .
      .
      If you want to contact me at work, you can
      either <a href="mailto:jane.doe@example.org">email
      .
      .
      .

However, to ensure that John's address book software understands this, Jane can use the FoaF mailbox property:

      .
      .
      .
      If you want to contact me at work, you can
      either <a rel="foaf:mbox" href="mailto:jane.doe@example.org">email
      .
      .
      .

Note that using QNames to describe the property means it is clear and unambiguous--no matter where this appears, in whatever document, it will mean the FoaF mbox property.

Adding container elements

In addition to her email address, Jane also wants to add her name and phone number. Currently the values that she would like to use for these properties are not separated from the other text items so, as per rule 2, Jo adds some simple wrapper elements:

    <p>
      Hello. This is <span>Jane Doe</span>'s home page.
      <h2>Work</h2>
      If you want to contact me at work, you can either
      <a
       rel="foaf:mbox"
       href="mailto:jane.doe@example.org"
      >
        email me
      </a>
      , or call <span>+1 777 888 9999</span>.
    </p>

Using text as property values

Now that the text is inside span elements it is easy to add the FoaF properties for name and phone number, using the RDFa
attribute property:

    <p>
      Hello. This is
      <span property="foaf:name">Jane Doe</span>'s home page.
      <h2>Work</h2>
      If you want to contact me at work, you can either
      <a
       rel="foaf:mbox"
       href="mailto:jo.lambda@example.org"
      >
       email me
      </a>
      , or call
      <span property="foaf:phone">+1 777 888 9999</span>.
    </p>

Complete mark-up

The completed document looks like this:

<html>
  <head>
    <title>Jane Doe's Home Page</title>
  </head>
  <body>
    <p>
      Hello. This is
      <span property="foaf:name">Jane Doe</span>'s home page.
      <h2>Work</h2>
      If you want to contact me at work, you can either
      <a
       rel="foaf:mbox"
       href="mailto:jo.lambda@example.org"
      >
       email me
      </a>
      , or call
      <span property="foaf:phone">+1 777 888 9999</span>.
    </p>
  </body>
</html>

Now all John needs to do is to provide the internet address for Jane's home-page to his contact software, and it will be able to extract the following information about Jane:

foaf:name     = "Jo Lambda"
foaf:mbox     = "mailto:jo.lambda@example.org"
foaf:phone    = "+1 777 888 9999"
foaf:homepage = "http://jo-lambda.example.org/"

More formally, the markup Jane added to her XHTML defines a set of RDF triples. Each triple effectively represents one property of her data.