🤯 50% Off! 700+ courses, assessments, and books
Browse Titles
Programming

Don’t Misuse REL as a Custom Attribute

    Craig Buckler
    Share

    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.