As part of learning HTML5 and RDFa I put together a Simple HTML5 RDFa Example, using a photo Irene took of Minoan Figurines during a trip to Crete for the main content.
Identifying Things
Using RDFa I wanted to generate RDF statements about:
- the example itself
- the article on Crete
- the photo of the Minoan Figurines
- and Irene and myself as content contributors.
Each of these five things requires an URI. The example automatically has one ( http://www.3kbo.com/examples/rdfa/simple.html ) while Irene and myself are identified by our FOAF files, Irene and Richard.
The remaining two URIs are created by adding the HTML bookmarks “crete” and “minoan-figurines” to the example, generating the URIs:
- http://www.3kbo.com/examples/rdfa/simple.html#crete and
- http://www.3kbo.com/examples/rdfa/simple.html#minoan-figurines.
HTML5 Doctype and RDFa Version
To support both HTML5 and RDFa I added the following html5 doctype and rdfa version declaration.
<!DOCTYPE html> <html version="HTML+RDFa 1.1" lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:rdfs="http://www.w3.org/2000/01/rdf-schema#" xmlns:xsd="http://www.w3.org/2001/XMLSchema#" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:foaf="http://xmlns.com/foaf/0.1/">
The HTML5 new elements header, hgroup, nav, section, article and footer are used in the example, primarily for constructing a document structure that will be developed further in the future.
Viewing the RDF
The link RDF extracted by pyRDFa uses the RDFa Distiller and Parser to extract the RDF statements. If Tabulator is installed clicking the link provides the following view of the generated RDF.

About the Example
The statements about A Simple HTML5 RDFa Example are all made in the document meta data, using the properties dc:date, dc:created, dc:creator, dc:title and dc:subject from the Dublin Core Metadata Element Set. The metadata in the head of the document refers to the example itself.
<head profile="http://www.w3.org/1999/xhtml/vocab"> <meta property="dc:date dc:created" content="2010-11-11T13:00:00" /> <meta rel="dc:creator" href="http://www.3kbo.com/people/richard.hancock/foaf.rdf#i" /> <meta rel="dc:subject" href="http://dbpedia.org/resource/Semantic_Web" /> <meta rel="dc:subject" href="http://dbpedia.org/resource/RDFa" /> <meta rel="dc:subject" href="http://dbpedia.org/resource/HTML5" /> <meta rel="dc:subject" href="http://dbpedia.org/resource/SPARQL" /> <meta rel="dc:subject" href="http://dbpedia.org/resource/Crete" /> <meta rel="dc:subject" href="http://dbpedia.org/resource/Minoan_civilization" /> <title property="dc:title">A Simple HTML5 RDFa Example</title> ... </head>
About Crete and the Minoan Figurines
In the code below the RDFa about attribute, specified as about=”#crete” and about=”#minoan-figurines”, sets the current subject for the article on Crete and the photo of the Minoan Figurines respectively. The appropriate creator and subject is also assigned to each subject.
<a name="crete" /> <div about="#crete" rel="dc:creator" href="http://www.3kbo.com/people/richard.hancock/foaf.rdf#i"> <h2 about="#crete" rel="dc:subject" href="http://dbpedia.org/resource/Crete" property="dc:title">Crete 2010</h2> <a name="minoan-figurines" /> <div class="imgbox" about="#minoan-figurines"><img src="images/minoan-figurines.jpg" alt="figurines" /> <div><span property="dc:title" rel="dc:subject" href="http://dbpedia.org/resource/Minoan_civilization">Minoan Figurines, Crete</span> photo by <span rel="dc:creator" href="http://www.3kbo.com/people/irene.bell-hancock/foaf.rdf#me">Irene</span>.</div> </div> </div>
About Richard and Irene
For Richard and Irene the typeof attribute is set to foaf:Person, the about attribute specifies the appropriate FOAF file and foaf:knows is used to specify that Richard knows Irene.
<div class="socialnet" about="http://www.3kbo.com/people/richard.hancock/foaf.rdf#i" typeof="foaf:Person" property="foaf:name" content="Richard Hancock"> <p><span property="foaf:firstname">Richard</span> knows</p> <ul rel="foaf:knows"> <li typeof="foaf:Person" about="http://www.3kbo.com/people/irene.bell-hancock/foaf.rdf#me"> <a property="foaf:name" rel="foaf:homepage" href="http://picasaweb.google.com/goannagraphics">Irene</a></li> </ul> </div>
Combining Information
One of the benefits of using RDF is that it easy to combine information. A small example of how easily RDF statements from different sources can be combined is provided using Tabulator. If the link RDF extracted by pyRDFa is opened in Tabulator followed by the link to Irenes FOAF file then the is creator of statement is included in the second Tabulator view, even though it is not present in the original FOAF file.

Because Irene is uniquely identified Tabulator can safely combine the information from the two datasources.
SPARQL Query for Content By Author
RDF extracted from the example can be queried using SPARQL. The following query identifying the content authors can be pasted into the sparql.org query form. The FROM key word specifies that the query will use the RDF extracted from the example, yielding the following results.
PREFIX dc: <http://purl.org/dc/elements/1.1/>
PREFIX foaf: <http://xmlns.com/foaf/0.1/>
select ?Content ?Author
FROM <http://www.w3.org/2007/08/pyRdfa/extract?uri=http://www.3kbo.com/examples/rdfa/simple.html>
where { ?s dc:creator ?o .
?s dc:title ?Content .
?o foaf:name ?Author .
}
order by ?Content
SPARQL Query Results for Content By Author
----------------------------------------------------------- | Content | Author | =========================================================== | "A Simple HTML5 RDFa Example"@en | "Richard Hancock"@en | | "Crete 2010"@en | "Richard Hancock"@en | | "Minonan Figurines, Crete"@en | "Irene"@en | -----------------------------------------------------------
Embedded SPARQL Query
The example contains the SPARQL Query for Content by Author embedded as the link
This URL encodes the SPARQL Query that is sent to the www.sparql.org SPARQL end point.
When the link is selected the SPARQL Query is run against the RDF extracted from the example and returned directly to the browser.
What Next
Both HTML5 and RDFa are addictive. For HTML5 there are lots of new features to explore and for RDFa more meta data to connect up.





