Introduction To RDFa

⟨⟨ Previous: Introduction to RDF | Next: Introduction to rNews ⟩⟩

Now that we've covered RDF it's time to move onto the main event: RDFa. RDFa is a technique for embedding RDF data models into HTML documents and it helps bridge the data/display gap that we discussed earlier. To explain RDFa we'll continue the saga of Stuart Myles. Let's start by looking at Stuart's rather sad looking website. Like all webpages, Stuart's homepage is written in HTML. A full introduction of to HTML is beyond the scope of this document, but the World Wide Web Consortium provides an excellent introduction.

The HTML behind Stuart's homepage is as follows:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html>
      <head>
        <title>Stuart's Homepage</title>
        <style type="text/css">
           @import url(css/smyles.css);
        </style>
      </head>
      <body>
        <div class="main_content">
          <div class="pic">
            <img src="img/face-glasses.png"/>
            <div class="pic_caption">
              Not really a picture of Stuart.
            </div>
          </div>
          <div class="content_heading">Stuart Myles</div>
          <p class="main_content_p">
            Twitter Handle: 
            <span class="main_content_field">
              @smyles
            </span>
          </p>      
          <p class="main_content_p">
            Blog: 
            <a class="main_content_field" href="http://stuartmyles.blogspot.com ">
              http://stuartmyles.blogspot.com 
            </a>        
          </p>    
        </div>
      </body>
    </html>

Of course, information mentioned in HTML is not machine-readable, so a web spider would have no idea what the data on Stuart's home page actually means. The RDF example from the previous section, on the other had, perfectly models the meaning of this data. Using RDFa, we can embed this RDF model into Stuart's HTML page.

The first thing we have to do to add RDFa to Stuart's homepage is to change the DOCTYPE declaration from the standard XHTML 1.0 declaration to an RDFa-compatible DOCTYPE. So we change line 1 to:

    <DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN" "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd>

Now that we have declared that this may contain RDFa, we need to introduce our namespace abbreviation. We do this by adding an xmlns attribute to the <html> element. So we change line 2 to:

    <html xmlns:iptcTerms="http://www.iptc.org/ns/1.0">

Next we need to state the name of the subject about which we will be making statements. In RDFa this is accomplished by adding an ABOUT attribute to the element enclosing the information relevant to the subject. The <DIV> element on line 10 encloses all the information about Stuart we wish to model, so that's where we'll put our ABOUT attribute.

    <div about="http://www.iptc.org/authority/per/stuart_myles" class="main_content">

Now that the subject is declared, we can start asserting triples. The syntax used for this depends on the type of triple being asserted. Data triples (triples with literal objects) are asserted by attaching the PROPERTY attribute to the element containing the literal value. Object triples (triples with URI objects) are asserted by attaching the REL attribute to elements referencing the target URI using either a HREF or SRC attribute. So to assert the data triple http://www.iptc.org/authority/per/stuart_myles iptcTerms:has_twitter_handle "@smyles", we modify lines 18-20 as follows:

    <span property="iptcTerms:has_twitter_handle" class="main_content_field">
      @smyles
    </span>

To assert the object triple http://www.iptc.org/authority/per/stuart_myles iptcTerms:has_blog <http://stuartmyles.blogspot.com>, we modify lines 26-28 as follows.

    <a rel="iptcTerms:has_blog" 
       class="main_content_field" 
       href="http://stuartmyles.blogspot.com">
      http://stuartmyles.blogspot.com
    </a>

So now we've used RDFa to assert both triples that were in the RDF model introduced in the previous section. But there is more useful data in Stuart's homepage: his name, a picture, and a caption. Also there's the implicit but obvious (to us) fact that Stuart is a person. We can model this information using the following RDF data model. When this data model is serialized using the Turtle format we get the following:

    @prefix iptcTerms: <http://www.iptc.org/ns/1.0> .
    @prefix rdf: <http://www.w3.org/1999/02/22-rdf-syntax-ns#> .
    
    <http://www.iptc.org/authority/per/stuart_myles> 
      a iptcTerms:person ;
      iptcTerms:has_blog <http://stuartmyles.blogspot.com> ;
      iptcTerms:has_name "Stuart Myles" ;
      iptcTerms:has_twitter_handle "@smyles" ;
      iptcTerms:depicted_by <http://dev.iptc.org/rnews/demo/img/face-glasses.png> .
    
    <http://dev.iptc.org/rnews/demo/img/face-glasses.png> 
      iptcTerms:caption "Not really a picture of Stuart." .

This model introduces a couple of features we haven't seen before. First, unlike our earlier model, this model describes not one but two resources. Also, this model uses a second namespace rdf = <http://www.w3.org/1999/02/22-rdf-syntax-ns#>. From this namespace we use the verb rdf:type. This is a special relationship in RDF and it is used to indicate that the resource is an instance of a class. The rdf:type relationship is so important that it receives a special serialization in Turtle where it is written down simply as a.

Now lets use RDFa to embed these new triples into our HTML document. We'll start by declaring that the resource http://www.iptc.org/authority/per/stuart_myles is of rdf:type iptcTerms:person. In RDFa, we assert that a resource is of a type by attaching the TYEPOF attribute to the element that declares the resource. In our example we modify the DIV element on line 10 as follows:

      <div about="http://www.iptc.org/authority/per/stuart_myles"
         typeof="iptcTerms:person"
         class="main_content">

Next we'll assert the data triple http://www.iptc.org/authority/per/stuart_myles iptcTerms:has_name "Stuart Myles" . To do we simply add a new PROPERTY attribute to the DIV element on line 17.

    <div property="iptcTerms:has_name" class="content_heading">Stuart Myles</div>

Next we need to embed the triples for the picture and its caption. We'll start with the caption. Now Stuart, despite his many redeeming qualities, does not have a caption. He has a blog and a twitter handle, but no caption. It's the image that has a caption, so it is the image that must be the subject of the iptcTerms:hasCaption verb. To indicate this, we add both an ABOUT and a PROPERTY attribute to the DIV element containing the caption on lines 13-15.

    <div about="http://dev.iptc.org/rnews/demo/img/face-glasses.png"       
       property="iptcTerms:hasCaption" 
       class="pic_caption">
      Not really a picture of Stuart.
    </div>

The last triple we need to assert is that Stuart is iptcTerms:depicted_by the image. We accomplish this by adding a single REL attribute to the DIV element containing both the caption and the image on lines 11-16.

    <div rel="iptcTerms:depicted_by" class="pic">
      <img src="img/face-glasses.png"/>
      <div about="http://dev.iptc.org/rnews/demo/img/face-glasses.png"       
         property="iptcTerms:hasCaption" 
         class="pic_caption">
        Not really a picture of Stuart.
      </div>
    </div>

But didn't we say that you have to pair a REL attribute with either a HREF attribute or a SRC attribute to assert an object triple? Well we left off one detail. If you specify just a REL attribute for an element, then the relationship specified by this attribute is asserted between the enclosing subject (in this case <http://www.iptc.org/authority/per/stuart_myles>) and all subjects declared inside that element.

Now that we've explained how to embed the all these triples into Stuart's homepage, lets take a look at the finished product.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN" "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd"> 
    <html xmlns:iptcTerms="http://www.iptc.org/ns/1.0">
      <head>
        <title>Stuart's Homepage</title>
        <style type="text/css">
           @import url(css/smyles.css);
        </style>
      </head>
      <body>
        <div about="http://www.iptc.org/authority/per/stuart_myles" 
           typeof="iptcTerms:person" 
           class="main_content">
          <div rel="iptcTerms:depicted_by" class="pic">
            <img src="img/face-glasses.png"/>
            <div about="img/face-glasses.png"  
               property="iptcTerms:caption" 
               class="pic_caption">
              Not really a picture of Stuart.
            </div>
          </div>
          <div property="iptcTerms:has_name" 
             class="content_heading">Stuart Myles</div>
          <p class="main_content_p">
            Twitter Handle: 
            <span property="iptcTerms:has_twitter_handle" 
                class="main_content_field">
              @smyles
            </span>
          </p>      
          <p class="main_content_p">
            Blog: 
            <a rel="iptcTerms:has_blog" 
               class="main_content_field" 
               href="http://stuartmyles.blogspot.com/">
              http://stuartmyles.blogspot.com
            </a>        
          </p>    
        </div>
      </body>
    </html>

If we run this HTML document through an RDFa distiller we will get back the following RDF data model.
(You may use the W3C distiller at http://www.w3.org/2007/08/pyRdfa/)

    @prefix iptcTerms: <http://www.iptc.org/ns/1.0> .
    @prefix rdf: <http://www.w3.org/1999/02/22-rdf-syntax-ns#> .
    
    <http://www.iptc.org/authority/per/stuart_myles> 
      a iptcTerms:person ;
      iptcTerms:has_blog <http://stuartmyles.blogspot.com> ;
      iptcTerms:has_name "Stuart Myles" ;
      iptcTerms:has_twitter_handle "@smyles" ;
      iptcTerms:depicted_by <http://dev.iptc.org/rnews/demo/img/face-glasses.png> .
    
    <http://dev.iptc.org/rnews/demo/img/face-glasses.png> 
      iptcTerms:caption "Not really a picture of Stuart." .

Since this data model is identical to the data model we set out to embed into Stuart's homepage, we've done everything right. And that's it! You now know everything about RDF and RDFa that you'll need as one of the options for implementing rNews on your website. Now its time to turn our attention to rNews itself.

⟨⟨ Previous: Introduction to RDF | Next: Introduction to rNews ⟩⟩

�

Pages in this Section

Page Information

Page History

Recently Changed More

Introduction To RDFa