Marking up content with RDFa
The following block of HTML shows a review of a video game.
HTML | Rendered HTML in browser |
| |
<p>by Bob Smith</p>
<p>March 20, 2009</p>
<p>This is a great game. I enjoyed it from the opening battle to the final showdown with the evil aliens.</p>
<p>4.5 out of 5 stars</p>|Blast 'Em Up Review
by Bob Smith
March 20, 2009
This is a great game. I enjoyed it from the opening battle to the final showdown with the evil aliens.
4.5 out of 5 stars|
To understand how to use RDFa, think about two concepts: entities (for example, a review) and properties of those entities (for example, the author of the review, the date of the review, the review itself, and the rating).
This is the HTML with RDFa markup:
<div xmlns:v="http://rdf.data-vocabulary.org/#" typeof="v:Review">
<p><strong><span property="v:itemReviewed">Blast 'Em Up</span>Review</strong></p>
<p>by <span property="v:reviewer">Bob Smith</span></p>
<p><span property="v:dtReviewed">March 20, 2009</span></p>
<p><span property="v:description">This is a great game. I enjoyed it from the opening battle to the final showdown with the evil aliens.</span></p>
<p><span property="v:rating">4.5</span> out of 5 stars</p>
</div>
This example contains three important properties:
xmlns. Occurs in the first line, and specifies the namespace where the vocabulary (a list of entities and their components) is specified. You can use the xmlns:v=„
http://rdf.data-vocabulary.org/# namespace declaration any time you are marking up pages for people, review, product, or place data. Be sure to use a trailing slash and # (xmlns:v=„
http://rdf.data-vocabulary.org/#” ).
typeof: Occurs in the first line of this
HTML block, and defines entities. Since this example contains a review, the entity is of type Review.
property: Used to label the properties of an entity. In the example, there are many properties of the review that are labeled: the reviewer, date of the review (dtReviewed), the review itself (description), and the rating (rating).
These three properties can be used in any HTML tags that open and close (div and span are two common choices). To mark up content using RDFa:
Begin with a namespace declaration using xmlns
Specify the type of content that is being marked up using typeof
Label the properties using property.
Relationships between entities in RDFa
In the example below, we describe two entities: a review and a person.
HTML Rendered HTML in browser
<p><strong>Blast 'Em Up Review</p>
<p>by Bob Smith, Senior Editor at ACME Reviews</p>
<p>This is a great game. I enjoyed it from the
opening battle to the final showdown with the
evil aliens.</p>
<p>4.5 out of 5 stars</p>
Blast 'Em Up Review
by Bob Smith, Senior Editor at ACME Reviews
This is a great game. I enjoyed it from the opening battle to the final showdown with the evil aliens.
4.5 out of 5 stars
In this example, the relationship between the two entities is that the person is the reviewer who created the review. The review and person entities each have their own set of properties. The properties of the person are their name (Bob Smith), job title (Senior Editor), and company (ACME Reviews). The properties of the review are the reviewer (an entity), the review itself, and the rating (4.5).
To convey the relationship between the review and the person, we use the rel property. Here is how this example looks with RDFa markup:
<div xmlns:v="http://rdf.data-vocabulary.org/#" typeof="v:Review">
<p><strong><span property="v:itemReviewed">Blast 'Em Up</span>
Review</strong><p>
<p>by <span rel="v:reviewer">
<span typeof="v:Person">
<span property="v:name">Bob Smith</span>, <span property="v:title">Senior
Editor</span> at <span property="v:affiliation">ACME Reviews</span>
</span>
</span></p>
<p><span property="v:description">This is a great game. I enjoyed
it from the opening battle to the final showdown with the evil aliens.</span></p>
<p><span property="v:rating">4.5</span> out of 5 stars</span></p>
</div>
The following two lines define the relationship between the two entities:
<p>by <span rel="v:reviewer">
<span typeof="v:Person">
Here, by using rel instead of property, we define a relationship between the review and the person, namely that the writer of the review (the „reviewer”) is an entity (Person), with its own properties such as name, title, and org.
„rel” without „typeof”
The final concept to understand in order to mark up your content with RDFa is that rel can exist without an explicitly labeled typeof. In these cases, the entity is implicitly defined.
HTML Rendered HTML in browser
<p><img src="www.example.com/bobsmith.jpg" /></p>
<p><strong>Bob Smith</strong></p>
<p>Senior editor at ACME Reviews</p>
<p>200 Main St</p>
<p>Desertville, AZ 12345</p>
Bob Smith
Senior editor at ACME Reviews
200 Main St
Desertville, AZ 12345
Here is the HTML with RDFa markup:
<div xmlns:v="http://rdf.data-vocabulary.org/#" typeof="v:Person">
<span rel="v:photo">
<img src="www.example.com/bobsmith.jpg" />
</span>
<p><span property="v:name"><strong>Bob Smith</strong></span></p>
<p><span property="v:title">Senior Editor</span> at <span property="v:affiliation">ACME Reviews</span></span></p>
<span rel="v:address">
<p><span property="v:street-address">200 Main St</span></p>
<p><span property="v:locality">Desertville</span></p>
<p><span property="v:region">AZ</span> </p>
<p><span property="v:postcode">12345</span></p>
</span>
</div>
In this example there are two implicitly defined entities: the person's photo and their address. Since the address property always relates to an entity of type address, there is no need to explicitly include a line with typeof=„v:Address”. Similarly, a photo always relates to a URL pointing to an image, so there is no need to explicitly define a typeof property.