Don’t Misuse REL as a Custom Attribute

don't misuse rel!There are often situations when it’s useful to add custom data to an HTML tag. In my recent series How to Build an Auto-Expanding Textarea jQuery Plugin, I assigned a name of “expand” to a textarea class attribute to trigger JavaScript functionality. As we (possibly) move toward the semantic web, both microformats and RDFa add meta data to tag attributes to enhance the meaning of information within a web page.

Custom data may not be displayed by the browser, but is convenient as a programmatic hook. Most developers are aware that custom attributes do not exist in HTML4…


<!-- this is not valid -->
<div myattribute="mydata"></div>

Browsers will not normally complain, but you cannot be absolutely certain how the attribute will be handled. Some will add it to the DOM and some may ignore it completely. Your page will also fail validation which makes it more difficult to spot real errors.

XHTML does allow you to specify custom tags and attributes. However, the process involves developing your own DTD (Document Type Definition) which is overkill when you just need a sprinkling of data for a simple JavaScript widget.

Unfortunately, there is common misconception that the ‘rel’ attribute is unused and can be adopted in any situation that requires custom data. Don’t make that assumption. In HTML4.01 and XHTML1.0, ‘rel’ can only be used as an attribute for a and link tags. Your code will be invalid if you assign it elsewhere.

In addition, ‘rel’ describes the relationship between the current document and the document or anchor specified in the href attribute. That relationship can be one or more of the following types: alternate, stylesheet, start, next, prev, contents, index, glossary, copyright, chapter, section, subsection, appendix, help, and bookmark. At best, your custom data will be ignored. At worst, a future revision of HTML might define your data as a specified link type and handle your attribute in an undesired way.

The HTML5 specification is slightly different. It also permits rel attributes on area tags and defines the link types: alternate, archives, author, bookmark, external, feed, first, help, icon, index, last, license, next, nofollow, noreferrer, pingback, prefetch, prev, search, stylesheet, sidebar, tag, and up.

However, HTML5 also offers us the custom data attribute which is any name starting with the string “data-”, e.g.


<!-- HTML5 custom data attribute -->
<span data-speed-mps="186282">speed of light</span>

Unfortunately, the HTML5 specification is incomplete and browser support is patchy at best.

So, until HTML5 becomes a reality, what tags or attributes should you use for custom meta data? The answer is: the most suitable one you can find. For example, you might want to define a description for an image that appears in a JavaScript-powered tooltip — the ‘longdesc’ attribute could be ideal.

Alternatively, use ‘class’ if an appropriate attribute is not available. Most HTML elements support the class attribute and multiple names can be separated by white space characters.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • SimonH

    Slightly guilty here, I have found it useful on occasion, but I guess there are normally better ways around it as you point out.

    What I don’t get though, is why there isn’t a rel=”email” or rel=”contact”? I would have thought it’s a fairly common use of an a tag.

  • wwb_99

    We just started using the Html5 data-* bits on our apps today. Yeah, you get validation errors here and there, but then again, our designers often introduce their own very special validation issues so that don’t bother me so much.

  • http://xslt2processor.sourceforge.net boen_robot

    @SimonH
    How are the values “email” and “contact” relative to the page that has them? If you (or user agents) want to distinguish between mail and HTTP links, the “mailto:” URI scheme can be used for that. And there’s rel=”author” (in Opera at least) when you want to contact the author of the page. Other than that, what is “contact” relative to the current page?

    @wwb_99
    If validation errors aren’t disturbing you, why not use custom attributes without a “data-” prefix? And/or why not have a talk with these designers?

    Personally, the only time I’ve abused the rel attribute is to overcome XHTML 1.0 Strict’s “target” attribute removal. I use rel=”external” as a hook by which JavaScript adds ‘target=”_blank”‘ to such links. And I think it still fits the bill – the link is “external” to the current page (i.e. on an external site; at least usually), and that’s specified in an attribute that is exactly for relations. For other uses, I find “class” to be enough for me, at least on the front end. If I need something really complicated, I’d do it on the back end as a custom XML that would be transformed to the complicated front end.

  • Chris Pratt

    I disagree slightly. The part I do agree on is that “rel” is supposed to be used for defining the purpose or character of the element it’s attached to: rel=”external” on a external link for instance. However, where I disagree is that you should only use defined rel values. As long as you’re correctly identifying a relationship, you should not be constrained by what has or has not been added to some approved list. Take rel=”lightbox” for example. This is used all over the web to add lightbox functionality to image galleries. It’s not on the approved list, but it defines a real relationship: click this link and a lightbox will open. Also, let it not be forgotten that most of the approved rel values got their start from people adding them on their own: rel=”external” is a perfect example.

  • http://tantek.com/ tantek

    Your advice to avoid abusing the rel attribute for custom data is spot on.

    Regarding the specific examples of “contact” and “email”:

    There is a defined rel=”contact”, in XFN 1.1 since 2004 (even presented at the ACM HyperText conference that year)

    http://tantek.com/log/2004/08.html#d16t0830

    http://gmpg.org/xfn/11

    For more on both standard rel values, and rel values in development, see:

    http://microformats.org/wiki/existing-rel-values

    For marking up your email address (assuming you publish it), hCard has an email property you can use as part of marking up your contact information:

    http://microformats.org/wiki/hcard-authoring

  • http://tantek.com/ tantek

    @boen_robot I think your use of rel=”external” is both reasonable and makes sense.

    I added another comment about rel=”contact” already being part of XFN 1.1, and “email” being handled by hCard, but it appears to be stuck in a moderation queue – probably because I hyperlinked to the relevant resources. :)

    [Comment duly set free. Thanks, Tantek! --Ed.]

  • palgrave

    I use rel=”external” as a replacement for target=”_blank” as well.

    I got the method from an old Kevin Yank article on SP.

    Do you think he knew back then it would be part of the html5 spec?!

  • Stevie D

    @SimonH

    What I don’t get though, is why there isn’t a rel=”email” or rel=”contact”? I would have thought it’s a fairly common use of an a tag

    <address>
    <a href=”mailto:me@example.com”>Contact</a>
    </address>

    There’s a perfectly good HTML element that denotes contact information for the page, so just use that!

  • http://www.simonholmes.com SimonH

    I think that using either <address> or rel=”author” is limiting the scope somewhat, as IIRC the <address> tag also relates to the author of the page.

    There are many instance where there may be multiple contacts with a relation to the page that are not the author. You might for example have regional contacts, a PR contact or a technical contact that are related and relevant to the page whilst not being the author.

    As pointed out by others, microformats seem the way forward on this, I just think they missed a potentially useful trick with the rel.

  • http://xslt2processor.sourceforge.net boen_robot

    Ha. I found the old SitePoint article in question, and indeed uses the same technique I do. I’ve only been doing web developing for about three years, so the article was written before I even started ^_^ .

    I learned this method from another forum though, not from that article… now I see where that guy got his inspiration ;-) .

    Glad to see that external is now also a standard value (or at least considered to become one – it’s still a draft after all). It feels nice to know that I used a part of HTML 5 without knowing I did :-D .

  • Stevie D

    I think that using either <address> or rel=”author” is limiting the scope somewhat, as IIRC the <address> tag also relates to the author of the page.

    There are many instance where there may be multiple contacts with a relation to the page that are not the author. You might for example have regional contacts, a PR contact or a technical contact that are related and relevant to the page whilst not being the author.

    <address> is used for the main contact for the page (or section?), it does not have to denote the author of the page.

    If it’s a general email address then the fact that the href starts mailto: should give enough of a clue!

  • http://www.simonholmes.com SimonH

    My point is that the “main contact” for a page may well vary from user to user. Different users will inevitably have different reasons for a viewing a site/page.

    Sure, having ‘mailto’ denotes the link as being a contact, but is doesn’t denote that the contact has any relation to that page.

    In a similar vein you could argue that through the text content of prev, next and last links (for example) it should also be pretty obvious what they are! :-)

  • http://www.simonholmes.com SimonH

    The closest compromise to achieve what I’m talking about is something like this:

    <address title=”Web Design Guide @ About.com”>
    Jennifer Kyrnin<br>
    <a href=”/mpremail.htm”>webdesign.guide@about.com</a>
    </address>

    Taken from http://webdesign.about.com/od/examples/l/bltagsaddressexample.htm

    As an unintended aside, this also brings to light a potential issue about picking up the “mailto” thus automatically knowing is a contact link.

  • http://xslt2processor.sourceforge.net boen_robot

    @SimonH
    No. It’s not clear on the “prev”, “next” and “last” links without a rel attribute. You can’t get it from their text, unless perhaps you compare it to the current page’s URI… and even then it’s not completely unambigous. To a human it may be obvious, but not to a program.

    <address> is used to denote contact information. Who are you contacting is up to the contents of the element. How about you use a class? Elements of class “PR” could be anything related to “PR”, including “links to PR” (a.PR), “contact links to PR” (address a.PR), “links about PR from other sites” (a.PR[rel=external]), “quotes from the people at PR” (blockquote.PR), etc.

    When you have a resource related to the current page, you could use rel. When you have a resource related to something specific that is (possibly) on the current page, a class is more appropriate I think.

  • http://www.simonholmes.com SimonH

    Please take heed of smilies, it kinda means the preceding point isn’t meant to be taken entirely seriously!

    Err … :-)

  • http://www.brothercake.com/ brothercake

    Er, Craig – you write a post advising people not to misuse the REL attribute, and then go on to encourage them to misuse the LONGDESC attribute …? The value of longdesc must be a URI, so the only way to correctly use it for the purpose you suggest would be to describe the information in a data: URI.

    Really, namespaced attributes are the answer to this particular issue, but one or two facts of history mean that their common use is still a pipe dream…

  • http://www.optimalworks.net/ Craig Buckler

    @brothercake
    Yep, my mistake — although I wasn’t actually specific about how you would implement it. You could point to a URL and grab the text using Ajax.

  • http://www.brothercake.com/ brothercake

    Yeah yeah :-P