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.