RDFa, the elements

September 22, 2018

290

This is the translation of the article Introduction to RDFa II by Mark Birbek, originally published in A List Apart on July 7, 2009. The translation is presented here with the consent of the publisher (A List Apart Magazine) and the author. In the first part of this series dedicated to RDFa we have seen how semantic functions normally confined to the head document section can be used to add semantic richness to the elements contained in body the document. We have also defined 6 rules:

The elements link and simply that there is a relationship between the current document and other documents; the attribute @relallows us to provide a value that best describes this relationship.
The attributes @reland @hrefare no longer confined, in their use, to the elements and link, but can also be used on an item img to define a relationship between the image and other items.
In normal HTML the properties are defined in head the document, using the @contentelement attribute meta. In HTML documents with RDFa, it @contentcan be used to set properties on any element.
Although HTML uses the property @nameto define the name of a property on an element meta, it can not be used on other elements, so RDFa provides a new attribute called @property.
If an attribute is not present @property, then the value of a property will be set using the inline text of an element.
If the attribute is present, @contentit overrides the value of the inline text of an element to define the value of the property

In this second part we will learn to add properties to an image and add metadata to any item; we will also add some new rules to the list we have just seen.

Add properties to an image

In the first part we discussed the fact that HTML @relis used to specify a relationship between the current document and some other document. We have also noted that RDFa generalizes this function so that it @relcan be used on an element img; the expressed relationship is between the image (in the attribute src) and the other document. The same principle applies when properties are added to the tag img: they will also apply to the image rather than the current document. For example, to indicate when an image was created, we could do this:

Rule 7

In normal HTML, only properties that are relative to the page can be defined, but RDFa allows properties to be set for image URLs as well.

RDFa allows you to express both a property and a relationship on an image:

Add metadata to all elements

Speaking in general, we took three steps forward following the evolution from the basic HTML to RDFa:

We have observed that all the features related to the metadata that can be used in the section head can now be used in the body of the document ( body), although we must change the attribute @namewith @property.
We have seen how RDFa allows the names of properties and relationships to come from well-defined vocabularies, through the use of specific prefixes.
We have learned that RDFa allows the definition of properties and relationships for images, as well as with the current document.

If you are not sure about these steps, you can consult the first part of the series.

The ability to add properties and relationships to images is something we would certainly like to extend to other things. If I can indicate the type of license for the current document and the license for the images, why can not I indicate the type of license for anything else that I refer to on my web page?

For example, suppose you have some links pointing to a couple of SlideShare presentations related to the RDFa language:

<pre class=”brush: php; html-script: true”>
<a href = “http://www.slideshare.net/fabien_»
gandon / rdfa-in-a-nutshell-v1 “> RDFa in a»
nutshell </a>
<a href = “http://www.slideshare.net/mark.birbeck»
/ the-5-minute-guide-to-rdfain-only-6-minutes-40- »
seconds “> The 5-minute guide to RDFa … in only 6
minutes and 40 seconds </a>
</pre>

If you look at both pages on SlideShare, you will see that license information is clearly visible. But what if we wanted to add license information to the current document so that a smart browser can do something about it? (The page, for example, could be a search results page, so we could show license information to the user who did a search as a way to help him select the documents).

We could think that just use @rel=”license” these elements a, as would be normal. But remember that this way it implies that the current document has a license that is identified by the item in the attribute @href; in this case the other document is a page on SlideShare not a license.

So, in order to add more information about a resource, RDFa adds a new attribute, called @about. Following exactly the same pattern as @srcthe tag attribute img, it can have information associated with it like @reland @property, but it can also be used on any HTML element. Here’s how we will use the attribute @aboutto help us add license information related to our slides. Our first link:

<pre class=”brush: php; html-script: true”>
<a href=”http://www.slideshare.net/fabien_gandon »
/rdfa-in-a-nutshell-v1″>RDFa in a nutshell</a>
</pre>

… will contain information about the license in this way:

Note that as long as you are dealing with an RDFa processor, this extra markup may appear anywhere in the document, it does not need to appear near the link pointing to the presentation. Of course, from the point of view of readability by a human being, it should be close to the link.

The second presentation:

<pre class=”brush: php; html-script: true”>
<a href=”http://www.slideshare.net/mark.birbeck »
/the-5-minute-guide-to-rdfain-only-6-minutes-40- »
seconds”>The 5-minute guide to RDFa…in only 6 »
minutes and 40 seconds</a>
</pre>

… will contain information about the license in this way:

This code can also appear anywhere in the context of the document.

Note that the reference to each license is still a clickable link: from the user’s point of view nothing changes when we add @aboutto a link. However, from the perspective of metadata, each license is now applied to an external document that contains a presentation rather than being applied to the current document.

Of course, in a real example the clickable links would probably contain the icons of Creative Commons, more or less like this:

As you may have understood, just as we use @propertyand @contentto add properties to the document and images, we can also add them to the resources we refer to @about. For example, if we wanted to add information about the author to a presentation, we could do this:

So, in summary, our rule will be like this:

Rule 8

Properties and relationships can be specified for each resource, not just for the current document and images, using the @aboutRDFa attribute .

End of the first part.

Use @about to define the context of multiple properties and relationships
Setting a number of properties and relationships for the current document is easy. In normal HTML we limit ourselves to inserting a certain number of elements meta and link in the section head of the document, and perhaps some elements with the attribute @relin the body of the document. Now we can add @propertyand @contentin body, they too can be scattered everywhere.

But what is the equivalent technique for setting multiple properties using @about? The examples we saw earlier used only one property and one relationship for each element since that is the limit imposed by the HTML structure itself: each attribute on an element must have a unique name, so it is not possible to specify more values for multiple properties and values for relationships on a single element.

The answer is however simple. In RDFa the attribute @abouton an element actually sets the context for each RDFa fragment that appears on the child elements. Before illustrating this, let’s recap our last example:

Remember that this markup actually tells us two things. First: “The presentation on SlideShare at the specified URL has a CC BY license”. Second: “The presentation on SlideShare at the specified URL was created by Fabien Gandon”.

To make the problem we are trying to solve a little more tangible, imagine that we now also want to add the date on which the presentation was published to our markup, with the only limitation that we are not allowed to add another attribute @propertyto the link.

Here is the solution.

The easiest way to get what we want is to start creating an element that contains the context in which we want our RDFa to operate, which in this case is the address of the presentation:

Once we have this basic structure, we can put all the properties inside it:

<pre class=”brush: php; html-script: true”>
<div about=”http://www.slideshare.net/fabien_gandon »
/rdfa-in-a-nutshell-v1″>
<h1>RDFa in a Nutshell</h1>
<ul>
<li>Author:
<em property=”dc:creator”>Fabien Gandon</em></li>
<li>Created:
<em property=”dc:created” content=”2007-01-01″>
Jan 1st, 2007</em></li>
<li>License:
<a rel=”license” href=”http://creativecommons.org »
/licenses/by/2.5/”><img src=”http://i.creativecommons.org »
/l/by/2.5/80×15.png” /></a></li>
</ul>
</div>
</pre>

If this scheme seems familiar to you, it’s because it’s exactly the same layout we saw at the beginning, when we added the properties related to the current document:

<pre class=”brush: php; html-script: true”>
<html xmlns:dc=”http://purl.org/dc/terms/”>
<head>
<title>RDFa: Now everyone can have an API</title>
</head>
<body>
<h1>RDFa: Now everyone can have an API</h1>
<ul>
<li>Author:
<em property=”dc:creator”>Mark Birbeck</em></li>
<li>Created:
<em property=”dc:created” content=”2009- »
05-09″>May 9th, 2009</em></li>
<li>License:
<a rel=”license” href=”http:// »
creativecommons.org/licenses/by-sa/3.0/”>
CCAttribution-ShareAlike</a></li>
<li>Previous version:
<a rel=”dc:replaces” href=”rdfa.0.8.html”>
version 0.8</a></li>
</ul>
</body>
</html>
</pre>

The only difference between this and our new example (the presentation on RDFa by Fabien) is that the context for all the properties and relationships we have added is defined with @about, while in the first example it was simply the document itself. We thus arrive at a rule.

Rule 9

The property @aboutsets the context for all the properties and relationships it contains. If there is no @aboutset value, then all properties and relationships refer to the current document.

If some aspect of this last step is not clear, then I invite you to read it again calmly; this technique is perhaps the most important difference between RDFa and other methods for incorporating structured data into HTML, such as microformats and eRDFs.

Conclusions

In the two parts of the series we took into consideration the basics of RDFa, which in essence are:

generalize the functionality on HTML metadata so that it can be used throughout the document ( head or body) and on each type of element;
add a mechanism based on prefixes that allow us to be very precise with respect to the origin of the terms we are using;
add the attribute @aboutso that properties and relationships can be specified for each resource, not just for the current document or the images it contains.