In this post I document parts of the RDFa markup used on this website. Because I am convinced of Semantic Web technology as the future of the web, I am keen to apply this techniques on my own website. I aimed to apply the W3C recommended RDFa primer best practices techniques. In the following it is described how these best practices are implemented on this site. This post does not aim to teach the concept of RDFa, for this please see the links under Resources, a short overview is given though.
What is RDFa
Resource Description Framework in Attributes (RDFa) is a technique that facilitates adding structured (machine readable) data to HTML using a set of attributes (see Table 1). Sometimes RDFa is also referred to as a CSS for meaning.
|about||a URI or CURIE specifying the resource the metadata is about|
|content||optional attribute that overrides the content of the element when using the property attribute|
|datatype||optional attribute that specifies the datatype of text specified for use with the property attribute|
|property||specifying a property for the content of an element or the partner resource|
|rel and rev||specifying a relationship and reverse-relationship with another resource, respectively|
|src, href and resource||specifying the partner resource|
|typeof||optional attribute that specifies the RDF type(s) of the subject or the partner resource (the resource that the metadata is about)|
To be able to provide well defined ("standardized") semantics for your content markup, it is favorable to re-use exisiting vocabularies. This will also increase the interoperability of the data marked up this way. Here you can find a list of officially (W3C) recommended/supported vocabularies for RDFa markup.
Implementation of RDFa within this website
If you want to develop RDFa markup for a website, it is really helpful to use some tools to validate the markup you wrote. A tool which I can recommend is RDFa Developer, it is available as an Add-On for the Firefox web browser. This Add-On provides a window at the bottom of the page displaying warnings and errors for the RDFa markup, much like the famous Firebug Add-On for client side webdevelopment. Additionally it provides a usefull view of the RDF triples modelled in the site and also a SPARQL interface to query that data. The other tool I can recommend, is of course the official W3C RDFa Validator. The validator provides, additionaly to warnings, errors and "informational messages" a statement if the validated document is a valid RDFa resource or not.
The vocabularies used to markup content within the site are defined as XML Namespaces (xmlns) within the <html> tag.
version="XHTML+RDFa 1.0" xml:lang="en">
Listing 1: Vocabularies included in the <html>-tag.
This part shows, the vocabularies included for RDFa markup on this website. For standard XHTML properties used in property-tags, I assigned a prefix "xhv". This is normaly not necessary, but I find this increases clarity of the semantics, i.e. it clearly defines the vocabulary the property is defined in.
The RDFa markup of a blog entry is pretty simple. As you can see in the listing, I used just two DCTerms, "title" and "created", to add semantics to blog posts.
<h2 class="blog_post_title" property="dc:title">
<a href="..." rel="bookmark">
RDFa content markup
<span class="..." property="dc:created">August 01, 2013 at 03:23 </span> | categories:
Listing 2: RDFa markup for blog posts.
<div about="http://cwillmes.de/about.html" typeof="v:VCard">
<span property="v:fn">Chrsitian Willmes</span>
<div typeof="v:Address v:Home">
<span property="v:street-address">Stammstr. 26</span>,
<a rel="v:email" href="mailto:email@example.com">firstname.lastname@example.org</a>
<span property="v:key" rel="link">(<a href="Christian_Willmes_c.email@example.com_(0x2FA87ED4)_pub.asc" target="_blank">PGP Public Key</a>)</span>.<br/>
See <span property="v:nickname">@cwillmes</span> Box at the right sidebar for more contact options.
Listing 3: RDFa vCard markup.
On the CV page, I only marked up the publications, so far. I will markup the other structured Infromation also, but this is a bit more tricky, because I could not find good vocabularies for this purpose yet. (Please send me recommendations, If you have some.)
The publication entries of my academic record are marked up using the Bibliographic Ontology (Bibo). This ontology provides an comprehensive vocabulary to describe scientific publications. See listing 4 for an example publication, with RDFa bibo annotations.
<span property="dc:creator">Willmes, C.</span>,
<span property="dc:creator">Brocks, S.</span>,
<span property="dc:creator">Hoffmeister, D.</span>,
<span property="dc:creator">Hütt, C.</span>,
<span property="dc:creator">Kürner, D.</span>,
<span property="dc:creator">Volland, K.</span>,
<span property="dc:creator">Bareth, G.</span>
(<span property="dc:date" datatype="xsd:gYear">2012</span>):
<span property="dc:title">Facilitating integrated spatio-temporal visualization and analysis of heterogeneous archaelogical and palaeonvironmental research data.</span>
<span prperty="bibo:Journal">ISPRS Ann. Photogramm. Remote Sens. Spatial Inf. Sci.</span>
Listing 4: RDFa markup of bibliographic information.
I am aware, that the RDFa markup I implemented is not perfect. But hey, better doing some steps in the right direction than nothing. I will do follow up posts with extensions and improvements to the RDFa implementation for this site from time to time. I am happy about any feedback regarding the RDFa markup I used and I hope I could provide some helpful things to others who want to implement RDFa on their websites.
- Extending FOAF with Resume Information