The case for rel="enlarge" in HTML5

Lately I’ve been following the development of HTML5 with interest, and have come across the WHATWG RelExtensions Wiki, which lists proposed legal rel values. Having seen what I feel is a gap, I have decided to propose one of my own.

Currently there is no standard way to indicate that a link points to an enlarged version of the image it contains. I propose that there should be one in the form of a value “enlarged” on the rel attribute.

Scope

To be clear, we are talking about anchor elements that contain one child image element, where the link points to an image file which is the same as the source of the child image element except a larger size (in dimensions -file size isn’t relevant). To make things easy, we’ll call the image file being linked to the “target” and the link’s child image the “thumbnail”. In the example below, the target is a 500×500 image of a sweater, and the thumbnail is a 75×75 version of the same image.

<a href="blue-sweater-500.jpg"><img alt="Blue Sweater" src="blue-sweater-75.jpg" /></a>

That shows the scenario in its simplest form. There could easily be another scenario, for instance, where the target is a rectangular image but the layout of the page dictates that the thumbnail must be square. In this case, the thumbnail would be a smaller and cropped version of the target. I still think this is acceptable.

Use cases

The use cases for this standard are widespread and common:

• A set of product shots on an e-commerce site.
• A series of screenshots on a tutorial.
• A collection of photos on a gallery site.

Semantics

The rel attribute is used for describing the relationship between the document being linked to and the current document, as in the most commonly used example rel="stylesheet" used on link elements to indicate the file being linked to is a stylesheet for the current document. What we are saying with rel="enlarged" is that “the file being linked to is an enlarged version of an image within the current document” or more specifically “the file being linked to is an enlarged version of the image within this link”.

You could argue that this stretches the concept of the rel attribute a little, since we are describing a relationship to one element on a document rather than the whole document. You’d be right, but I feel it’s an acceptable stretch and a more suitable solution than using the class attribute or adding a new attribute.

I spent quite a bit of time thinking about which word would be best for this. After discarding things like “zoom” and “magnify”, which could imply that the target is an enlarged version of only part of the thumbnail, I settled on “enlarged”, but I would be grateful for any better suggestions either in the comments here or on the WHATWG wiki as I still don’t think it’s perfect.

Benefits

• Using rel=”enlarged” would provide a semantic hook for stylesheets, enabling authors, users and user agents to visually differentiate such links if desired.
• Using rel=”enlarged” would provide a semantic hook for scripts which are commonly used to override the default behaviour of such links and provide an on-page  slideshow-style interface to improve the user experience. Many such scripts use their own rel or class value as a hook – hopefully the introduction of a standard would make this less common.
• Using rel=”enlarged” would provide a semantic hook for user agents to improve the default behaviour for such links, where either a script like those described above is implemented by the author and the user has JavaScript disabled, or no script is implemented by the author.

I am going to list here any sites which use rel="enlarged". Please comment with the URL if your know a site that does use it, and I will add it to the page.