Your thoughts on styling external links differently?

I think it’s uses are limited only because people don’t represent external links uniquely by default (therefore it’s not a recognisable convention). What I would say is, a few websites I visit identify external links with an icon besides the link text (to the left) and this may present a more ideal solution. If the links are the same color, their easier to recognise and differentiate from styled text on the page, but with icons you can highlight links that have unique attributes (to the target) such as external site, if a popup (god forbid) is required and when you link to unique file-types like PDF or DOC (having their applications icon besides it). :slight_smile:

I would say in the case of external sites it’s not so much an issue as you can hover over a link and it’s address appears in the status bar. But if you link to a PDF file or file type which isn’t native to the browser I would say the importance level of differentiating the links so people know what the resulting behaviour will be (opening a new application) is imperative. While the need for such a function could be debated, I would say it’s a usability enhancement. :slight_smile:

I think icons next to external links is used often enough on the net that users are used to it by now and may be useful.

I would suggest using a css selector that puts a background image next to links beginning with http:

Something like this would work great:

a[href ^= "http:"] {
background:url(yourimage.gif) no-repeat top left;

In older browsers like IE6 the links won’t show this and will just display normally.

@AlexDawson - thanks for the link.

I’d been thinking about adding something similar to one of my sites for a while, that would make the process a whole lot easier.

I should have thought of Wikipedia! :slight_smile:

I think these icons are indeed relevant sometimes, like on these examples. But not on any standard website.


Hello xhtmlcoder,

So basically you don’t think it’s super useful either. I can’t think of any website that does this sort of thing.

I still think it’s just unnecessary visual noise, apart from maybe some specific case such as a very long article with both types of links (internal and external), but it doesn’t apply to our case. Besides, we’re talking about applying this differenciation to the whole site.

still not convinced :slight_smile:


Generally it is not needed but if it is a large article it could be used as a visual aid. However, usually that type of thing is done with the title attribute and possibly icons basically saying they; “Link to an external site”.

The main obstacle will be getting the user used to how you define them after that it may be beneficial in some cases - for repeat visitors.

Hi bluedreamer,

You’re right to put it this way. To me, within the context of my company website, I think there is no problem with not stying these external links differently.
It’s not like we write loads of posts every day with lots and lots of content and a long list of external references. It’s just not the case.

For Wikipedia I can see how this works down the bottom of each page, for references, but we’re far from Wikipedia’s model.

Besides, our audience is web-savvy, so I suppose they know how to use their back button. Plus it should be understandable from context that a link might take you elsewhere.

As a user, it’s never bothered me NOT being told I’m going to leave the site. It would annoy me if the page was opening in a new window, but that’s so 5 years ago anyways.
For the user, isn’t it the same to be directed to an external site or to a page within the same site? Either way you’re gonna have to press the back button to go back to the original page.

^ with the exception of main menu links, which popularly are styled button-y are are accepted by the general public.

What I would say that and my experience says that seening with a small icon and sometimes links goes off site. What I do I opened on new tab every time…

audio links?? aaaaaaaaaaaaah

  • runs away screaming *

: )

hey my friend i think you should add buttons along with some visual as well as audio sounds but try to make it professional and innovative…
i saw many webpages with this facilities but they were not innovative…try to add touch of innovation