getButterfly Logo getButterfly

I’ve always wanted to know the full meaning and uses of the HTML “rel” attribute. As SitePoint published a (yet in beta) HTML reference, I will point you there to read more.

The rel attribute defines the relationship that the linked resource has to the document that is referencing it. In most cases, this will simply be “stylesheet”, meaning, not surprisingly ‘the referenced document is a stylesheet’. Nothing too complicated there. Related to this value is “alternate”, which is used alongside the “stylesheet” value – rel=”alternate stylesheet” – and is used to indicate that there is another style associated with the page. In fact you can define several alternate styles, although the main issue with this is making it clear to the user that there is an alternate style sheet available. In Firefox, you can chose View > Page Style and pick from the available style sheets on offer, but there is no obvious indication in any browser that these alternates exist – it is usually left to the developer to provide some kind of JavaScript-based style switcher that renders as a control on the page.

The rel attribute is used to provide extra information regarding the relationship of the document being linked to (as set out in the href attribute) to the referencing document.

Subscribe to getButterfly Blog

Once a week or so we send an email with our best content. We never bug you, we just send you our latest piece of content.

If you found any value in this post, agree, disagree, or have anything to add - please do. I use comments as my #1 signal for what to write about. Read our comment policy before commenting! Comments such as "Thank you!", "Awesome!", "You're the man!" are either marked as spam or stripped from URL.

4 thoughts on “The "rel" Attribute

  1. Very informative….I always come back to your blog to look for little tricks.

  2. It’s these little things that make a page complete and add just that extra useful edge.

    You pointing these things out, yet again, makes your blog worth reading regularly.

  3. Interesting! I never realized that you could have multiple styles, nor did I realize that FireFox would actually support that.

    It would be interesting if this somehow caught on and users actually used the various styles according to their liking.

Leave a Reply

Your email address will not be published. Required fields are marked *