<!DOCTYPE html><html><div><strong>Blood ties</strong> / Garth Nix and Sean Williams.
<div><em>Author</em>: Nix, Garth.</div><div><em>Publication Info</em>:
New York, NY : Scholastic Inc., 2014.</div><div><em>Edition</em>: First edition.</div></div></html>
HTML as presentation
The above code renders in normal browsers roughly as:
Blood ties / Garth Nix and Sean Williams.
Author: Nix, Garth.
Publication Info:
New York, NY : Scholastic Inc., 2014.
In this case, pointing off to some other web page, presumably about Garth Nix.
Structured data in HTML: RDFa
The semantic web's Resource Description Framework (RDF) started with a focus on XML triples,
resulting in complexity like:
Content negotiation (to get different representations of the same data from the same URL)
Building an entirely separate semantic web
Geniuses then figured out how to decorate HTML using attributes to represent types, properties, and relationships
The semantic web and the document web can therefore be united!
Consumers can derive direct relationships between the properties and the text that is displayed to actual humans with much more certainty
RDFa Lite: HTML attributes
Delineating structured data in HTML using attributes.
vocab: the vocabulary that defines the referenced types and their properties
typeof: the type of the thing being described
property: the property of the described thing
resource: an identifier for a given thing on the page
prefix: you can mix multiple vocabularies, if you have to
Scope
The typeof property creates a new scope, which is (normally) limited to the HTML element on which it is defined, and children of that element.
<!DOCTYPE html><divtypeof="Example">The scope starts here
<p>and continues
<span>through all of the nested
<em>child</em></span><span>elements</span></p></div>
Blood ties: Plain HTML
<!DOCTYPE html><div><strong>Blood ties</strong> / Garth Nix and Sean Williams.
<div><em>Author</em>: Nix, Garth.</div><div><em>Publication Info</em>:
New York, NY : Scholastic Inc., 2014.
</div><div><em>Edition</em>: First edition.</div></div>
HTML + RDFa (basic)
<!DOCTYPE html><divvocab="http://schema.org/"typeof="Book"><strongproperty="name">Blood ties</strong> / Garth Nix and Sean Williams.
<div><em>Author</em>:
<spanproperty="author">Nix, Garth.</span></div><div><em>Publication Info</em>:
<spanproperty="publisher">New York, NY : Scholastic Inc.</span>,
<spanproperty="datePublished">2014</span>.
</div><div><em>Edition</em>:
<spanproperty="bookEdition">First edition.</span></div></div>
A Book and a few of its attributes as plain text.
HTML + RDFa (nested types)
<!DOCTYPE html><divvocab="http://schema.org/"typeof="Book"><strongproperty="name">Blood ties</strong> / Garth Nix and Sean Williams.
<div><em>Author</em>:
<spanproperty="author"typeof="Person"><spanproperty="familyName">Nix</span>,
<spanproperty="givenName">Garth</span>.
</span></div><div><em>Publication Info</em>:
<spanproperty="publisher">New York, NY : Scholastic Inc.</span>,
<spanproperty="datePublished">2014</span>.
</div></div>
A Person can have attributes other than just familyName and givenName
HTML + RDFa (@resource)
<!DOCTYPE html><divvocab="http://schema.org/"typeof="Book"><strongproperty="name">Blood ties</strong> /
<spanproperty="author"typeof="Person"resource="#author1"><spanproperty="name">Garth Nix</span></span> and Sean Williams.
<div><em>Author</em>:
<spanproperty="author"typeof="Person"resource="#author1"><spanproperty="familyName">Nix</span>,
<spanproperty="givenName">Garth</span>.
</span></div><div><em>Publication Info</em>:
<spanproperty="publisher">New York, NY : Scholastic Inc.</span>,
<spanproperty="datePublished">2014</span>.
</div><div><em>Edition</em>:
<spanproperty="bookEdition">First edition.</span></div></div>
