Dealing with non-semantic uses of "rel" in RDFa

Question

I use RDFa to add linked data to my webpage. I also occasionally use the rel attribute in various tags for non-semantic purposes, such as triggering a javascript tooltip. I am wondering the there is something I can do to distinguish the uses.

For instance, I have RDFa around my social network icons like so:

<a rel="foaf:account" alt="twitter" href="https://twitter.com/cboettig"><i class="icon-twitter" rel="tooltip" title="follow me on twitter (reading, discussing)"></i></a> 

<a rel="foaf:account" alt="github" href="https://github.com/cboettig"><i class="icon-github" rel="tooltip" title="follow me on Github (code, research)"></i></a>

Where rel in the anchor tag is used semantically but rel the icon tags is used by twitter-bootstrap javascript to add a tooltip. Magically, in this example, tools such as http://any23.org intelligenty ignore the rel in the icon. However, when encountering a rel="tooltip" in a span element (used to add a tooltip to a button):

<span rel="tooltip" title="switch to dark theme">
   <a onclick="switch_style('dark');" class="btn btn-mini"></a> 
</span>

This creates an mostly meaningless ntriple such as:

<http://any23.org/tmp/> <http://any23.org/tmp/tooltip> <http://any23.org/tmp/> .

Of course it's not a huge problem, but I'm not sure why this happens with the span elements and not the other examples, or how to avoid it.

Hungerford

Related question for a valid (hence no duplicate) use of the rel attribute: Rich Snippets: rel=“nofollow” and RDFa – Shopworn

Answer 1

It's always a good idea to avoid non-semantic uses of attributes, especially rel. One way to avoid this is to use a class (perhaps class="tooltip") instead of a rel.

Prickle

okay, good point, that's a simple solution to my problem. I'm still a bit puzzled how to explain the behavior above where rel is only sometimes recognized as semantic by Apache's any23.org? – Hungerford

For reasons that I don't understand, using class instead of rel destroys the display of the icons (whether class is added to a span around them, or directly to the icon). – Hungerford

Never mind, my problems were caused because "tooltip" class is defined elsewhere in twitter-bootstrap, I simply need a unique class name. – Hungerford