Introduction to RDFa II – A Listing Aside

Partly I of this collection, we checked out how semantic options usually confined to the top of an HTML doc can be utilized so as to add semantic richness to the weather of the physique. Alongside the best way, we outlined six guidelines of RDFa:

Article Continues Beneath

The hyperlink and a components indicate that there’s a relationship between the present doc and another doc; the @rel attribute permits us to supply a worth that can higher describe that relationship.
The @rel and @href attributes are not confined to the a and hyperlink components, however may also be used on img to point a relationship between the picture and another merchandise.
In extraordinary HTML, properties are set within the head of the doc, utilizing @content material with meta. In HTML paperwork with RDFa, @content material can be utilized to set properties on any component.
Though HTML makes use of the @identify property to set the identify of a property on meta, it could’t be used on different components, so RDFa offers a brand new attribute known as @property.
If no @content material attribute is current, then the worth of a property will probably be set utilizing the component’s inline textual content.
If the @content material attribute is current, it overrides the worth within the component’s inline textual content to set the worth of the property.

Partly II, we’ll learn to add properties to a picture, and tips on how to add metadata to any merchandise—and we’ll add a couple of extra guidelines to that listing.

Including properties to a picture#section2

Partly I, we mentioned the truth that in extraordinary HTML, @rel is used to specify a relationship between the present doc and another doc. We additionally famous that RDFa generalizes this operate in order that @rel can be utilized on an img component; the connection expressed is between the picture (within the @src attribute) and the opposite doc. The identical precept applies when properties are positioned on the img tag: they too will apply to the picture, quite than the present doc.

For instance, to point when a picture was created, we would do that:

(Line wraps marked » —Ed.)

<img src="https://alistapart.com/article/introduction-to-rdfa-ii/image1.png" property="dc:created"
  content material="2009-03-22" />
<img src="image2.png" property="dc:created" 
  content material="2009-05-01" />

Rule 7:#section3

Strange HTML can solely set properties that relate to the web page itself, however RDFa permits properties to be set for picture URLs, too.

RDFa additionally permits each a property and a relationship to be expressed for a similar picture:

<img src="https://alistapart.com/article/introduction-to-rdfa-ii/image1.png" rel="license" 
  href="http://creativecommons.org/licenses/by-sa/3.0/"
  property="dc:created" content material="2009-05-01" />

Including metadata about any merchandise#section4

Broadly talking, we’ve made three necessary steps to this point, as we’ve adopted the evolution from primary HTML to RDFa:

We’ve famous that any of the metadata options that can be utilized within the head of the doc can now be used within the physique—though we needed to change the @identify attribute to @property to take action.
We’ve seen how RDFa permits the property and relationship names to return from clearly outlined vocabularies, utilizing prefix mappings.
We’ve discovered that RDFa permits properties and relationships to be expressed about photographs, in addition to in regards to the present doc.

If you happen to’re undecided about any of those steps, you would possibly wish to return and take one other look earlier than you keep on.

The power so as to add properties and relationships to pictures is one thing we’ll absolutely wish to generalize to different issues. If I can point out the license for the present doc, and the license for photographs, why can’t I point out the license for something I make a reference to in my net web page?

For instance, let’s say I’ve some hyperlinks to a few RDFa-related SlideShare displays:

<a href="http://www.slideshare.web/fabien_ »
gandon/rdfa-in-a-nutshell-v1">RDFa in a »
nutshell</a>

<a href="http://www.slideshare.web/mark.birbeck »
/the-5-minute-guide-to-rdfain-only-6-minutes-40- »
seconds">The 5-minute information to RDFa...in solely 6
minutes and 40 seconds</a>

If you happen to have a look at both of those pages on SlideShare, you’ll see that the licensing data is clearly displayed. However what if we wished so as to add the licensing data to the present doc, so {that a} sensible browser may do one thing with it? (The web page could be a set of search outcomes, for instance, so we would wish to present the license to the searcher, as a method to assist them when selecting paperwork.)

We would assume that we simply use @rel="license" on these anchors, as regular. However recall that this can indicate that the present doc has a license that’s recognized by the merchandise within the @href attribute; on this case the “different doc” is a SlideShare web page, not a license.

So, to make it attainable so as to add extra details about any useful resource we like, RDFa provides a brand new attribute, known as @about. It follows precisely the identical sample because the @src attribute on img—it could have @rel and @property data connected to it—however it may be used on any HTML component. Right here’s how we’ll use @about to assist us add licensing details about our slides. Our first hyperlink:

<a href="http://www.slideshare.web/fabien_gandon »
/rdfa-in-a-nutshell-v1">RDFa in a nutshell</a>

…is licensed this fashion by including the next mark-up:


<a about="http://www.slideshare.web/fabien_gandon »
/rdfa-in-a-nutshell-v1" rel="license"
  href="http://creativecommons.org/licenses/by/2.5/">
  CC BY</a>.

Be aware that so far as an RDFa processor is worried, this additional markup can seem wherever within the doc—it doesn’t want to seem subsequent to the presentation hyperlink. In fact, from the standpoint of human readability, it could often go subsequent to the hyperlink.

The second presentation:


<a href="http://www.slideshare.web/mark.birbeck »
/the-5-minute-guide-to-rdfain-only-6-minutes-40- »
seconds">The 5-minute information to RDFa...in solely 6 »
minutes and 40 seconds</a>

…is licensed by including this markup to the doc:


<a about="http://www.slideshare.web/mark.birbeck »
/the-5-minute-guide-to-rdfain-only-6-minutes-40- »
seconds" rel="license" 
  href="http://creativecommons.org/licenses/by-sa/2.5/">
  CC BY SA</a>.

As soon as once more, this markup may seem wherever.

Be aware that the reference to every license remains to be a clickable hyperlink, so from a person’s perspective, nothing modifications after we add @about to an anchor. Nonetheless, from a metadata perspective, every license is now being utilized to an exterior doc that comprises a presentation, quite than being utilized to the present doc.

In fact, in an actual instance the clickable hyperlinks would most likely include the Inventive Commons icons, like this:


<a about="http://www.slideshare.web/mark.birbeck »
/the-5-minute-guide-to-rdfain-only-6-minutes-40- »
seconds" rel="license" 
  href="http://creativecommons.org/licenses/by-sa/2.5/">
<img src="http://i.creativecommons.org/l/by-sa/2.5/80x15.png" />
</a>

And as you may have most likely realized, simply as we use @property and @content material so as to add properties for the doc and pictures, we will additionally add them to the assets referenced by @about. For instance, if we wished so as to add creator data to a presentation, we may do that:


<a about="http://www.slideshare.web/ »
fabien_gandon/rdfa-in-a-nutshell-v1" rel="license"
  href="http://creativecommons.org/licenses/by/2.5/"
  property="dc:creator" content material="Fabien Gandon">
<img src="http://i.creativecommons.org/l/by/2.5/80x15.png" />
</a>

So, to recap, our rule can be:

Rule 8:#section5

Properties and relationships will be specified for any useful resource, not simply the present doc and pictures, utilizing RDFa’s @about attribute.

Utilizing `@about` to set the context for a lot of properties and relationships#section6

Setting a lot of properties and relationships for the present doc is simple. In extraordinary HTML, we simply place a lot of meta and hyperlink components within the head of the doc, and maybe a couple of a tags with @rel within the physique. Now that we will add @property and @content material within the physique, they too will be sprinkled all through.

However what’s the equal approach for setting many properties when utilizing @about? The examples we’ve seen to this point have solely used one property and one relationship for every merchandise, as a result of that’s the restrict imposed by the construction of HTML itself: every attribute on a component should have a novel identify, so it’s not attainable to specify a number of property values and a number of relationship values on a single component.

The reply is nonetheless, fairly simple. In RDFa, the @about attribute on a component truly units the context for any RDFa that seems on any little one components. Earlier than we illustrate this, let’s recap our final instance:

<a about="http://www.slideshare.web/fabien_gandon »
/rdfa-in-a-nutshell-v1" rel="license" 
  href="http://creativecommons.org/licenses/by/2.5/"
  property="dc:creator" content material="Fabien Gandon">

<img src="http://i.creativecommons.org/l/by/2.5/80x15.png" />
</a>

You recall that this markup is successfully saying two issues. First, “The SlideShare presentation on the specified URL has the license CC BY” and second, “The SlideShare presentation on the specified URL was created by Fabien Gandon.”

To make the issue we’re making an attempt to unravel somewhat extra tangible, think about that we now additionally wish to add the date that the presentation was revealed to our markup—with the limiting issue that we’re not allowed so as to add one other @property attribute to the anchor.

Now to the answer.

The best technique to accomplish that is to start by creating a component that comprises the context wherein we would like all of our RDFa to function, which on this case is the tackle of the presentation:

<div about="http://www.slideshare.web/fabien_gandon »
/rdfa-in-a-nutshell-v1"> 
  ... 
</div>

As soon as we now have this, we will place all of the properties we wish to add inside it:

<div about="http://www.slideshare.web/fabien_gandon »
/rdfa-in-a-nutshell-v1"> 
 <h1>RDFa in a Nutshell</h1> 
 <ul>
   <li>Writer:
     <em property="dc:creator">Fabien Gandon</em></li>
   <li>Created:
     <em property="dc:created" content material="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/80x15.png" /></a></li>
 </ul>
</div>

If this format appears to be like acquainted to you that’s good, as a result of it’s precisely the format we noticed close to the start, after we have been including properties in regards to the ‘present doc’:

<html xmlns:dc="http://purl.org/dc/phrases/"> 
 <head>
 <title>RDFa: Now everybody can have an API</title> 
 </head> 
 <physique>
 <h1>RDFa: Now everybody can have an API</h1>
 <ul>
   <li>Writer: 
     <em property="dc:creator">Mark Birbeck</em></li>
   <li>Created:
     <em property="dc:created" content material="2009- »
 05-09">Might ninth, 2009</em></li>
   <li>License: 
     <a rel="license" href="http:// »
 creativecommons.org/licenses/by-sa/3.0/">
   CCAttribution-ShareAlike</a></li>
   <li>Earlier model: 
     <a rel="dc:replaces" href="rdfa.0.8.html">
     model 0.8</a></li>
 </ul>
 </physique>
</html>

The one distinction between this and our new instance—the RDFa for Fabien’s presentation—is that the context for all the properties and relationships that we’ve added is outlined with @about, whereas within the first instance, the context was merely the doc itself. This offers us one other rule:

Rule 9:#section7

The @about property units the context for all contained properties and relationships. If there is no such thing as a @about worth set, then all properties and relationships will probably be in reference to the present doc.

If any facet of this final step just isn’t clear to you, then I urge you to present it one other learn; this system might be crucial distinction between RDFa and different strategies of embedding structured information in HTML, comparable to Microformats and eRDF.

Within the first two elements of this collection, we’ve regarded on the fundamentals of RDFa, that are basically:

generalizing HTML’s present metadata options to allow them to be utilized in any a part of the doc (head or physique) and on any component;
including a prefix-mapping mechanism which permits us to be very exact in regards to the origin of any phrases we’re utilizing; and
including the @about attribute in order that properties and relationships will be specified for any useful resource, not simply the present doc or the photographs it comprises.

If you happen to’d wish to transcend the fundamentals and have a look at a number of the extra superior facets of RDFa, then check out the RDFa Handbook over at Backplane.