RDFa
Marking up content with RDFa
The following block of HTML shows a review of a video game.
| HTML | Rendered HTML in browser |
<p><strong>Blast 'Em Up Review</strong></p> <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 thexmlns: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 typeReview.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> |
|
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.
This article gives an overview of how to start marking your content with RDFa. For more information, see the official RDFa primer.
For specific vocabulary and examples, see: