HTML+RDFa Example

<!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/">
<head profile="http://www.w3.org/1999/xhtml/vocab">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<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>
<link rel="icon" href="http://www.3kbo.com/images/3kbo_favicon.png"
	type="image/png" />
<link rel="prefetch" href="http://www.w3.org/2007/08/pyRdfa/extract?uri=http://www.3kbo.com/examples/rdfa/simple.html" />
<link rel="prefetch" href="http://www.sparql.org/sparql?query=PREFIX+dc%3A+%3Chttp%3A%2F%2Fpurl.org%2Fdc%2Felements%2F1.1%2F%3E%0D%0APREFIX+foaf%3A+%3Chttp%3A%2F%2Fxmlns.com%2Ffoaf%2F0.1%2F%3E%0D%0Aselect+%3FContent+%3FAuthor%0D%0AFROM+%3Chttp%3A%2F%2Fwww.w3.org%2F2007%2F08%2FpyRdfa%2Fextract%3Furi%3Dhttp%3A%2F%2Fwww.3kbo.com%2Fexamples%2Frdfa%2Fsimple.html%3E%0D%0Awhere+{+%3Fs+dc%3Acreator+%3Fo+.%0D%0A%3Fs+dc%3Atitle+%3FContent+.%0D%0A%3Fo+foaf%3Aname+%3FAuthor+.%0D%0A}%0D%0Aorder+by+%3FContent&default-graph-uri=&stylesheet=%2Fxml-to-html.xsl&output=text" />		

<script type="text/javascript">
document.createElement("header");
document.createElement("nav");
document.createElement("article");
document.createElement("section");
document.createElement("footer");
</script>
<style type="text/css">
header,nav,section,article,footer {
	padding: 4px;
	margin: 4px;
	display: block;
}

header {
	background: #000;
	color: #999;
}

nav {
	border: 4px solid #000;
}

section {
	border: 4px dashed #000;
}

article {
	border: 2px dotted #000;
}

figure {
	border: 1px solid #000;
	padding-left: 1em;
}

footer {
	border: 1px dotted #000;
	text-align: center;
}

.socialnet {
	padding: 20px 0px 10px 20px;
	margin: 10px;
	background-image: url(http://www.foaf-project.org/images/foafTiny.gif);
	background-repeat: no-repeat;
	background-position: 2px 2px;
	background-color: #73a68b;
}

div.socialnet p {
	padding: 0px 0px 2px 0px;
	margin: 5px;
}
</style>
</head>
<body>
<header role="banner">
<hgroup>
<h1>A Simple HTML5 RDFa Example</h1>
</hgroup>
</header>

<nav>
<ul>
	<li><a href="http://blog.3kbo.com/simple-html5-rdfa-example">About
	this example</a></li>

	<li><a
		href="http://www.w3.org/2007/08/pyRdfa/extract?uri=http://www.3kbo.com/examples/rdfa/simple.html">RDF
	extracted by pyRDFa</a></li>
	<li><a
		href="http://www.sparql.org/sparql?query=PREFIX+dc%3A+%3Chttp%3A%2F%2Fpurl.org%2Fdc%2Felements%2F1.1%2F%3E%0D%0APREFIX+foaf%3A+%3Chttp%3A%2F%2Fxmlns.com%2Ffoaf%2F0.1%2F%3E%0D%0Aselect+%3FContent+%3FAuthor%0D%0AFROM+%3Chttp%3A%2F%2Fwww.w3.org%2F2007%2F08%2FpyRdfa%2Fextract%3Furi%3Dhttp%3A%2F%2Fwww.3kbo.com%2Fexamples%2Frdfa%2Fsimple.html%3E%0D%0Awhere+{+%3Fs+dc%3Acreator+%3Fo+.%0D%0A%3Fs+dc%3Atitle+%3FContent+.%0D%0A%3Fo+foaf%3Aname+%3FAuthor+.%0D%0A}%0D%0Aorder+by+%3FContent&default-graph-uri=&stylesheet=%2Fxml-to-html.xsl&output=text">SPARQL
	for Content by Author</a></li>
</ul>
</nav>
<section>
<article>
<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>
</article>
<article>
<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>
</article>

</section>
<footer>
<a about="http://www.3kbo.com/people/richard.hancock/foaf.rdf#i"
	typeof="foaf:Person" rel="foaf:homepage" href="http://www.3kbo.com">3kbo</a>
</footer>
</body>
</html>
HTML+RDFa Example

Related
