Don’t Misuse REL as a Custom Attribute
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.
Frequently Asked Questions about the ‘rel’ Attribute in HTML
What is the ‘rel’ attribute in HTML and how is it used?
The ‘rel’ attribute in HTML is used to specify the relationship between the current document and the linked document. It is used within a link or area element. The value of the ‘rel’ attribute is a space-separated list of link types. For example, ‘rel=”stylesheet”‘ is used to link to an external CSS file.
What does ‘rel=search’ do in HTML?
The ‘rel=search’ attribute in HTML is used to link to a search tool for the website. It is not widely supported by browsers, but when it is, it can provide a way for users to access a site’s search function directly from their browser.
Can I use multiple values in the ‘rel’ attribute?
Yes, you can use multiple values in the ‘rel’ attribute. The values should be space-separated. For example, ‘rel=”author license”‘ would indicate that the linked document is both written by the author and contains the license information.
Is ‘rel’ a custom attribute in HTML?
No, ‘rel’ is not a custom attribute. It is a standard attribute in HTML, defined in the HTML specification. Custom attributes are those that are not defined in the HTML specification and typically start with ‘data-‘.
What are some common values for the ‘rel’ attribute?
Some common values for the ‘rel’ attribute include ‘stylesheet’ (links to an external CSS file), ‘icon’ (links to a favicon), ‘alternate’ (links to an alternate version of the document), ‘author’ (links to information about the author), and ‘license’ (links to licensing information).
How does the ‘rel’ attribute affect SEO?
The ‘rel’ attribute can have an impact on SEO. For example, the ‘rel=”nofollow”‘ value tells search engines not to follow the link for ranking purposes. The ‘rel=”canonical”‘ value can be used to specify the preferred version of a page, helping to prevent duplicate content issues.
Can I use the ‘rel’ attribute with elements other than ‘link’ and ‘a’?
The ‘rel’ attribute is primarily used with the ‘link’ and ‘a’ elements. However, it can also be used with ‘area’ and ‘form’ elements, although this is less common.
What happens if I use an invalid value in the ‘rel’ attribute?
If you use an invalid value in the ‘rel’ attribute, it will likely be ignored by the browser. However, it’s best to stick to the values defined in the HTML specification to ensure your code is valid and works as expected.
Is ‘rel’ attribute case-sensitive?
No, the ‘rel’ attribute is not case-sensitive. However, it’s generally best practice to use lowercase for consistency and readability.
Can I leave the ‘rel’ attribute empty?
While it’s technically possible to leave the ‘rel’ attribute empty, it’s not recommended. The ‘rel’ attribute is meant to describe the relationship between the current document and the linked document, so leaving it empty would not provide any useful information.
Craig is a freelance UK web consultant who built his first page for IE2.0 in 1995. Since that time he's been advocating standards, accessibility, and best-practice HTML5 techniques. He's created enterprise specifications, websites and online applications for companies and organisations including the UK Parliament, the European Parliament, the Department of Energy & Climate Change, Microsoft, and more. He's written more than 1,000 articles for SitePoint and you can find him @craigbuckler.
