kmcm

Web Development with PHP, HTML, CSS, & JavaScript

Link Icons for external links and different file types

Thursday 24th September 2009

Sometimes you might find yourself with a number of different types of links on your website, from external links, to links opening a new window, links to pdf or document files, or links to print the content of a page. It is important from a user interface perspective to identify these links to your users before they click on them. For example, a novice user may be confused if a new window is opened when they click a link, or if they are sent to a new site altogether. When dealing with files it is good to distinguish between different file types, so users know beforehand whether to open a file, depending on whether they have the appropriate software. To identify between these links, it's a good idea to append this information to the title of the link. This way, it is interpretable by assistive technologies, and shows up as a tool tip for that link when the user hovers over that element. But it's not always immediately obvious. One way to make it clear is to distinguish between your link types using icons.

This is best achieved using CSS (adding tags constitute as extra, superfluous mark-up, since the images are purely decorative). There are a number of ways to do this, by either assigning classes or relationships to the links, or identifying the link by the content of the file extension, target or protocol.

For me, this is an enhancement on the user interface (not required, an added extra), so I can forgive myself for not 100% catering for IE6's poor support of CSS Selectors. Although using classes like class="pdf", class="external" would suffice, they are added hooks that lack semantics. It's quite likely that there could be classes on some of the links anyway (although there probably shouldn't be).

So I decided to use the relationship attribute, which is defined as "used to provide information about the relationship between the document that's being linked to and the referencing document." Sounds good enough. The rel attribute also has no specified value range, so can consist of any string eg:

rel="some relationship"
rel="somethingelse"

This attribute is often used in SEO, to identify links that are not to be followed by search engine spiders when indexing a site. It has been made famous by google, who's software obeys rel="nofollow".

Anyway, to isolate a type of link by the value of its rel attribute in CSS, we use the following selector:

a[rel=value]

This matches all a tags that have rel="value". From here it's just a case of styling that link appropriately. For me, I'd place the link type icon to the right of the link text, so we just use the padding-right and background properties, like so:

a[rel=external] {
padding-right:12px;
background: url(../images/external.png) center right no-repeat;
}

a[rel=pdf] {
padding-right:17px;
background: url(../images/pdf.png) center right no-repeat;
}

a[rel=doc] {
padding-right:19px;
background: url(../images/doc.png) center right no-repeat;
}

a[rel=top] {
padding-right:13px;
background: url(../images/top.png) center right no-repeat;
}

a[rel=txt] {
padding-right:19px;
background: url(../images/txt.png) center right no-repeat;
}

And here's a sample of accompanying html:


<!--external link-->
<a href="http://www.google.com" rel="external"
title="Google. This is an external link" >
Visit the google website. </a>
<!--pdf link-->
<a href="document.pdf" rel="pdf"
title="document.pdf. This is a pdf file" >
View the document. </a>

The padding right is set to a comfortable width to accommodate the image, and the background image is positioned on the right, and in the vertical centre. Here are a couple of examples of link icons in action.