A Simple HTML5 RDFa Example

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.

A Simple HTML5 RDFa Example

Identifying Things

Using RDFa I wanted to generate RDF statements about:

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:

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.

A Simple HTML5 RDFa Extraction

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.

A Simple HTML5 RDFa Example Irene

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.

2 Responses to “A Simple HTML5 RDFa Example”

  1. Shift says:

    Hi. Thanks for this article.

    Is version=”HTML+RDFa 1.1″ is correct? In validation options it disappeared. Documents with this versions does not pass the validating. I think this experimental version is disappeared to.

    What you think about extending the documents whith xHTML+RDFa doctype definitions by adding the xmlns contains the HTML 5 elements and atributes. I confused in soft syntax validation process and I think the validating in xHTML Transitional mode is good idea.

    Thanks

  2. richard says:

    Hi Shift,

    looking at the recent W3C News http://www.w3.org/News/2011.html#entry-9052 it looks like we’ll be seeing more work being done to incorporate RDFa into HTML5 and XHTML5 in the near future.

    There are some RDFa 1.1 features such as “XMLLiteral content processing” that not are not yet widely supported by the available RDFa 1.1 parsers. At this point in time using the xHTML+RDFa doctype is probably the best approach to take,

    Cheers,

    Richard