hGRDDL is a proposal to use a GRDDL-like approach to transform HTML+microformat to HTML+RDFa. This page describes an example of hGRDDL.
HTML+microformat
Consider an HTML page with an hCard. The example used here is a combination of examples from microformats.org.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head profile="http://www.w3.org/2006/03/hcard">
</head>
<body>
<address class="vcard">
<img src="myphoto.jpg" class="photo" alt="my photo" />
<a class="url fn" href="http://example.org/people/Jane/">Jane Smith</a>.
<a class="email" href="mailto:jane@example.org">email</a>
<div class="adr">
<div class="street-address">665 3rd St.</div>
<div class="extended-address">Suite 207</div>
<span class="locality">San Francisco</span>,
<span class="region">CA</span>
<span class="postal-code">94107</span>
<div class="country-name">U.S.A.</div>
</div>
</address>
</body>
</html>
hGRDDL
An hGRDDL-RDFa-aware agent should be able to:
load the profile http://www.w3.org/2006/03/hcard
extract from it a transform, e.g. http://www.w3.org/2001/sw/BestPractices/HTML/rdfa-bookmarklet/2006-10-08/hcal-rdfa.js
- load this transform and apply it to the document
- render the resulting document
The hGRDDL transform for hCard specifically does the following:
on the hcard element, it adds rel="dc:creator" to indicate that this hcard is the creator of the current page (this is debatable, using this as an example.)
on the anchor element that is of class url, it adds a rel="foaf:homepage", because the vcard vocabulary actually doesn't make room for URLs.
on the anchor element that is of class email, it adds a rel="vcard:email.
on the element that is of class fn, it adds a property="vcard:fn".
on the image element that is of class photo, it adds a rel="vcard:photograph".
on the element that is of class adr, it adds a rel="vcard:adr", which indicates that this element becomes a bnode with further properties.
on the sub-elements of adr with appropriate class names, it adds span="vcard:[prop_name]" where [prop_name] corresponds to the property name.
Resulting HTML+RDFa
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
</head>
<body>
<address class="vcard"
xmlns:vcard="http://www.w3.org/2001/vcard-rdf/3.0#"
xmlns:foaf="http://xmlns.com/foaf/0.1/"
xmlns:dc="http://purl.org/dc/elements/1.1/"
rel="dc:creator">
<img src="myphoto.jpg" class="photo" alt="my photo"
rel="vcard:photograph" />
<a class="url fn" href="http://example.org/people/Jane/"
rel="foaf:homepage" property="vcard:fn">Jane Smith</a>.
<a class="email" href="mailto:jane@example.org"
rel="vcard:email">email</a>
<div class="adr" rel="vcard:adr">
<div class="street-address" property="vcard:street-address">665 3rd St.</div>
<div class="extended-address" property="vcard:extended-address">Suite 207</div>
<span class="locality" property="vcard:locality">San Francisco</span>,
<span class="region" property="vcard:region">CA</span>
<span class="postal-code" property="vcard:postcal-code">94107</span>
<div class="country-name" property="vcard:country-name">U.S.A.</div>
</div>
</address>
</body>
</html>
Getting it Running
Get the hGRDDL-enabled, RDFa-based, N3 extractor bookmarklet: bookmarklets
Visit the hcard example: Sample HTML+hcard file
Click on the N3 extractor.
You can also try the RDFa highlighter.