SimpleQuiz › Part IX › Smart Linking

To mix it up a bit, I thought I’d offer this quiz question from Egor Kloos. It sort of borders on the topic of usability — finding the best way to hyperlink something in context.
What method will make the best impact? What we link, and where, is a simple way of improving a site’s readability. But what do you think?

Q: When linking to something that appears more than once within a sentence, where is the best place create that link?

  1. <a href="#">The W3C's section on HTML has been used by many designers as a reference to build better sites.</a>
  2. The <a href="#">W3C's section on HTML</a> has been used by many designers as a reference to build better sites.
  3. The W3C's section on HTML has been used by many designers as a reference to build better sites. <a href="#">Click here</a>.
  4. The W3C's section on HTML has been used by many designers as <a href="#">a reference to build better sites</a>.

See previous quiz questions and wrap-ups in the archive.

89 Comments

  1. Matt Haughey says:

    I’d go with B, because that’s how I’ve been writing blog posts for over four years. It’s conscise but most importantly the link can stand alone and still describe what is being linked (I could just show you “W3C’s section on HTML” and you’d have an idea of what it was if you clicked on it.
    I would guess it’s the best format of the above choices when it comes to making sure Google has good basic descriptions of the links it spiders too.

  2. Paul Yasi says:

    B is the best choice, since you are linking to the “W3C’s section on HTML” it would only make sense to link to it using that text. On sites that aren’t my own personal site, where the users may not be as intenet savvy, I have also used the Click Here type of links.

  3. bk says:

    Definitely B.

  4. B is best: because the link text closely matches the title of the page being linked to. This faciliates fast scannig for links in both visual browsers, as well as screen readers that often present “all the links in a page” out of context as a list that users page through quickly.
    D comes second: because the link text conveys at least some useful information to the user.
    A and C should not even be considered because they’re just plain usability disasters.

  5. p says:

    i’m all over B as well.

  6. Chris Clark says:

    When you’re picking text for hyperlinking (I think we’ve all read the “Don’t use ‘Click Here’ as link text” tip over at the W3C Validator page) the W3C basically says “be brief, but descriptive, and make sure it’s OK when you read it out of context.”
    You need to consider the guy surfing with a screen reader, tabbing through the available links on the page. He tabs through and his reader tells him the link is “W3C’s Section on HTML”, and he instantly knows where that’s going to take him. For my money, it’s B.
    Of course, there’s not always a perfect way to integrate link text into a sentence, and people (particularly people maintaining weblogs) are often forced to resort to single-word links that aren’t very descriptive of their target.. but such is life. B.

  7. Yep, I too say B.
    In A, the entire sentence is linked, which is just kind of ridiculous.
    In C, “Click Here” is linked, which everyone knows is a big no-no.
    D is the second best choice, but the linked phrase in B better describes the page being linked to than the linked phrase in D.

  8. eric says:

    Straight-up B.

  9. Keith says:

    I like B the best with D being the second best (and perfectly acceptable) choice. I do think it’s better to link to the actual title of the page, or as close to it, if possible.
    A side question. Does anyone else run into instances where you have to think really hard to come up with a link like this that doesn’t read “click here”?? I know this is a big no-no, but at times it seems to make the most sense and the brain has to work pretty hard to think of a better way of phrasing that link…

  10. I choose B-prime: just like B, but with “better” spelled correctly. :-)
    And yes, I do have to stop and think hard to avoid “Click here”, but I think it is always good to stop and think hard about sentences you create, so that’s a good thing.

  11. Erin says:

    B is the answer, but the text linked in D is just as important.
    The link in B provides information about the page the visitor will see if (s)he clicks on the link. A person will expect to be sent to the W3C HTML page.
    However, the writing and context in which the sentence is used is also a factor. If the informaton is intended for novices of web design, for instance, they might not know what the W3C or HTML is. In this case, emphasizing D is just as important.
    One possible solution is to link the text as seen in B, but emphasize (through b or i, strong or em tags) the section highlighted in answer D.

  12. markku says:

    Just like everyone before me, I’m going with B. And definitely not C!.

  13. Chris Platts says:

    Option C is a definite non-starter, and A is ugly. B and D both have merits, B describes the where the target is, but D is the call to action – it does what it says it will do. That’s my choice.

  14. Ben Scofield says:

    I’d say B (follow of the herd much?), but I think there’s a reason that hasn’t been expressed yet. A is superior on two fronts, size of clickable area and quantity of information conveyed. It fails miserably on scanability, however; I know I tend to *scan* for links, so short link text is better than full sentences for me, since I can read it much faster.
    If the option were presented, though, I’d vote for the following or something similar:
    The <a href="#" title="reference to build better sites">W3C's section on HTML</a> has been used by many designers as a reference to build better sites.
    That way you get the best of both B and D.

  15. Micah says:

    I just ran into this ongoing quiz a couple days ago; it’s truly a great thing.
    Regarding this question, I would second Ben Scofield’s alternate answer with a caveat. The title attribute comes in handy, but I tend to use it only on links whose text describes but doesn’t name the resource it links to. So while Ben’s example is good, I think the title attribute would be better served as:
    The W3C's section on HTML has been used by many designers as <a href="#" title="W3C: HTML 4.01 Specification">a reference to build better sites</a>.
    Still, I think the top answer of those proposed so far is still B.

  16. Dean says:

    B – because it specifically identifies the subject the sentence is talking about.

  17. Ryan Parman says:

    Skipping over A and C, and contrary to Chris Platts reasonings, I’d say that B is a better choice than D (assuming that what we’re linking to is the W3C HTML spec), because B is what you’re linking to! Although D says what you can do with it, it doesn’t make sense to place the link there unless you’re linking perhaps to instructions on how to use them (once again, back to the what and not the how).

  18. aliotsy says:

    I’d go with Micah’s solution, and I agree that B is the best proposed solution.

  19. click here says:

    B. A link should always be a noun of sorts.

  20. Ryan says:

    I would have to say B than D.

  21. At first glance, you can rule out A because it’s far too long, despite common practice on websites. You can also rule out C because it’s against all usability and accessibility guidelines from the W3C, and would result in possibly many links on the page all saying “click here” but going to different places.
    So we’re left with B and D. In this particular case I’d go with either solution — they’re both good, but if forced, i’d go with B. As mentioned above, the non-proposed option E (D with a title attribute) seems the best by far.

  22. Conspi says:

    B is definitively the best way. The words “W3C’s section on HTML” links to the W3C’s section on HTML, as clear as possible.

  23. B Of course

  24. B.
    B because the whole sentence would be too much. B because having a ‘click here’ text is kind of avoiding the problem and making reading more difficult. And B because repeating existing text in a title (as suggested by Ben) is not a solution either. In fact, adding a title is a good idea, but pertinence is missing here.
    The W3C’s section on HTML has been used by many designers as a reference to build better sites.

  25. Rahul says:

    Okay, so everyone seems to have figured out that the answer is either B or D depending on how anal you are ;-), what about punctuation?
    I have the following on my website: Support <a href="http://www.webstandards.org/" title="The webstandards campaign">webstandards!</a> … but should I remove the exclamation mark from the hyperlink because it’s part of the phrase and not part of the semantic value of the link?
    Fine, I suppose I could – but wouldn’t it look odd to have that lingering exclamation mark at the end of the sentence? Is this a classic example of somewhere to use the :after pseudo-state-thingamabob?
    I always puzzled over that kind of thing – whether or not the content: ""; aspect of CSS 2 should contain that kind of thing. Would that mean .followedbyexclamationmark:after {content: "!";} would start popping up all over the place, in order to handle hyperlinks where the exclamation mark belongs with the link, but isn’t semantically relevant to the hyperlink nor necessary for the sentence in the document?
    Argh. Brain melting.

  26. Egor Kloos says:

    I asked this question because it’s something that every content editor has to deal with. And as a designer I should at least be able to give some guidance in such matters.
    One could use any of the answers given above, although option C is a bit of a cop out and kinda sucks because the text itself in meaningless, option A is debatable and should be used with great care. Some sites use a hyperlink like a div, using a hover state for the entire block. This is used often in advertising for expample. Or to advertise a section within the site. XHTML2 is going to allow for a HREF within a DIV. So we haven’t seen the last of this.
    Remember the issue is not really about building websites. By the time this issue rears it’s head the site itself would, in many cases, have been finished. It’s a content issue. And it’s the contents editor’s responsibility to get such linking right. Context is very important is such cases. Most of us here have our own weblog and, as far as I’ve been able to discern, most of us get in right anyway. But I also seen many company sites get it wrong, even the ones I made I’m sorry to say.
    Oh yeah… my answer for this quiz is: B.
    Seeing as I’ve got no context to work with, B gives me the most concise and usable description. I don’t even need the title attribute!

  27. zavach' says:

    I think that’s B too, any way, C is condamned by W3

  28. M. Perakis says:

    I go with B. Why? Because Jakob said so!

    From Jakob Nielsen’s ‘Designing Web Usability’ – (p.55): “Underlining the words that matter is important, but even better would be to include text that provides a short summary of what kind of additional information is available”.

  29. I. G. says:

    A vote for ‘C’.

  30. Bob says:

    What everyone else (except I.G., who, I’m sorry, is wrong) said.

  31. Minz Meyer says:

    If there were a special document (the reference) in the HTML section we’re linking to, I’d go for D. But since this is not the case I’d go with Ben Scofield’s answer using B and the title attribute.

  32. ben says:

    I’ll probably get some *ish* for this one, but… What is really so bad about click here links? They are immediately dismissed and always frowned upon because, for years, Nielsen and the W3C have been telling us they are bad. But, just for a few minutes, entertain the idea.
    Obviously, when read aloud by a screen reader, “click here” doesn’t make a lot of sense. However, “Click here” accompanied by descriptive link text does make sense. As Paul mentioned above, less internet savvy users (which is at least a conisderable portion of all internet users) may not immediately understand the more semantic link. With people using CSS attribs to style links, the defacto standard of blue underlined text has disolved. Dotted-border pastel links with short and concise descriptors might be overlooked. For color blind or visually impaired users not using screen readers, or people not so accustomed to clicking every word they see, the added “Click here … ” could be a big help.
    So my answer – most of the time B, but in some cases: Click here to visit the W3C’s section on HTML
    Of course you wouldn’t use it on a site like this one, but for sites with large and diverse audiences where usability/accessibility is critical ( ie. WebMD or anything.edu ), it might be a good idea.

  33. B is the best option here…
    It simply points out what you’re going to get when clicking the link.
    C: “Click Here” makes no sense…it’s like a box of chocholates…you never know what you’re going to get
    D: “a reference to build better sites” is not the subject of the W3C article. It IS a reference but it could be used for a number of purposes. But it’s not encapsulating what you’re clicking to.
    A: It’s annoying to link a whole sentence…plain and simple.

  34. Misha says:

    First of all, the problem with the “click here” link is that not all users actually click. Many users – especially the ones with disability problems – use their keyboards for navigation. Other users – like me – they don’t even use a mouse. They use graphic pens, light pens or other similar devices that do not have a button for clicking.

    The second problem is that the “click here” itself does not carry any information as to what the user should expect to see. That’s according to Nielsen. So, to avoid this and to add more meaning to your link, you would say: Click here to visit the W3C’s section on HTML. But, isn’t it the same: visit the W3C’s section on HTML with two words less?

    Now if we take for a fact that users don’t read but they scan (see Paul Muter & Paula Maurutto’s article: Reading and Skimming From Computer Screens and Books: The Paperless Office Revisited?) we come up with a third problem. Most of the users associate the “click here” link with ads (or similar content) they are not interested in. So i think [B] is out of the way.

    Option [A] is just way too long to be a link, and I think most of the people agree with that.

    Between options [B] and [D] I cannot really choose one. I would say that it depends on the rest of the content (the article’s nature) and the type of the audience. What do they expect to see, why they read the article, etc.

  35. Zubin says:

    I’d have to choose [B].
    [A] is a sentence and it’s not really viable to use a whole sentence to link to the syntactical subject of the sentence.
    [C] contains unneccessary words in an effort to make it clearer that there is indeed a link, which %99 of users should be able to figure out without help.
    [D] passes a subtle value judgement on the “W3C’s section on HTML”, that it is a indeed “a reference to build better sites”, which it may not be for some users.

  36. eric says:

    In response to Rahul’s question about punctuation, I generally leave punctuation out of hyperlinks. If the link is at the end of the sentence I’ll close the link, then finish the sentence. It’s sort of similar to the methods of how you cite quotations – inside or outside is equally acecptable depending on how you’re writing.
    But yeah, it is pretty anal ;]

  37. Sylvia says:

    Well, I’m a novice coming straight from all-out tables format, and I’m still kind of wringing my brain around this whole subject, but I agree with Orligsson and Polselli about the “B-D first” list. I, too, think that a link should be some kind of noun, and D sounds right too because it gives info about what you’ll find in the link. Although I hate the “click here” option and find it redundant, it’s true that some not very web-savvy users would need this prop. But I simply find it excessive to use the link in the whole sentence.

  38. Rahul says:

    I wonder if there’s a way of getting some kind of parser to rewrite all this crap for us so we don’t have to worry our asses off about it as web designers/developers. Wouldn’t that be great? Knowing that you don’t have to depend on some kind of half-assed content editor to uphold the quality of your initial design because the CMS does it for you? A Semantic-aware Content Management System…
    If you’ve read David Brin’s Earth then you’ll know what kind of thing I’m talking about. Mm-yeah. If a book can predict hyperlinks and have it actually come true, I’m pretty sure subvocal semantics could show up sooner or later :)
    ..Endrant.

  39. ceejayoz says:

    Both B and D appeal to me (C being a horrific no-no), so I’m going go go with E – B and D.
    The <a href="#">W3C's section on HTML</a> has been used by many designers as <a href="#">a reference to build better sites</a>.
    As already mentioned, title could work as well…
    The <a href="#" title="a reference to build better sites">W3C's section on HTML</a> has been used by many designers as a reference to build better sites.
    …or…
    The W3C's section on HTML has been used by many designers as <a href="#" title="W3C's section on HTML">a reference to build better sites</a>.
    …of which I prefer the second. The first doesn’t really seem as much a “title” as the second.

  40. Sergio says:

    B, obviously. But since we’re touching up on this subject: Today I made a post about The Complete Far Side collection being available at Amazon. The text was this: “Boy, if I ever wanted something for my birthday…” for which the best I could do for the link was the whole “if I ever wanted something for my birthday…”. It’s rather forced and maybe too long, but I think it’s the best that could be done with the phrase. Any suggestions?

  41. Eugene says:

    Wow. At least it seems almost all people know what makes a good link text. But how come a lot of bloggers link like this?

  42. ceejayoz says:

    Sergio said:
    The text was this: “Boy, if I ever wanted something for my birthday…” for which the best I could do for the link was the whole “if I ever wanted something for my birthday…”. It’s rather forced and maybe too long, but I think it’s the best that could be done with the phrase. Any suggestions?
    Boy, if I ever wanted <a href="#" title="The Complete Far Side Collection">something</a> for my birthday...
    That’s how I’d do it…

  43. Meowth346 says:

    Even though I’d got with B as well, something similair to D that I’ve used often is:
    The W3C‘s section on HTML has been used by many designers as a reference to build better sites.
    A lot of my site’s updates will link to a section of a web site that the visitors might not be familiar with, so I like to give a link to the main page as well as the exact section. This could have the potential to more confusing, though, as it gives two links when the user might only want the more specific link.

  44. Sergio says:

    Excellent suggestion, ceejayoz. I’ve updated the post with your way. Thanks.

  45. John says:

    D, because it has keywords which accurately describe the content. For SEO reasons, I would prefer anyone link to me in that fashion because it increases the relevancy of the link.

  46. Gary F says:

    B, most natural and clear link text.

  47. Keith Mc says:

    Before reading the comments I chose B. Siply because “I does exactly what it says on the tin” (Ronseal ad)
    I did consider A at one point because sometimes (generally for advertising links) the longer the link, the easier it is to click.
    I always try to stay away from “click here” links unless I say something like “Looking for the latest articles on xxxx? Click here.”
    D works well too, but I still think B is the better choice.

  48. D is tempting for link relevancy reasons, but I choose a modified B. I think the word "The" should be included in the link.
    Links are almost a new grammatical construct, and the way you use them can affect the meaning, or at least the way people perceive the meaning, of the original sentence.
    D, to me, is distracting and almost confusing, because suddenly it seems like "a reference to build better sites" is a subject. It’s not, though; it’s part of an adverb phrase that modifies "The W3C’s section on HTML," and using it as a link makes that meaning harder to parse. In fact, THAT has the further effect of obscuring what the link is linking to! It almost seems like you could be linking to a different resource than was mentioned earlier in the sentence. In a less blatant example than this, that could lead to real confusion.
    Keyword linking is good, but not at the expense of the user knowing immediately what’s being linked to.
    I think "The" should be included in the link text because it’s only there ’cause of "W3C." If you leave B the way it is, the user perceives "W3C’s section on HTML" as a single noun, with "The" prepended to the whole thing. This isn’t the case; it’s prepended only to "W3C."

  49. But how come a lot of bloggers link like this?
    It’s a kind of emphasis, another way of using links to add meaning to the original sentence. In the Simon Willison entry you link to, the use of five different links in a five word phrase enhances the meaning of the phrase itself: "Saying for over a year." The links themselves are proof that he’s being saying that repeatedly for a year. It’s kind of recursive. :)
    The Hixie entry uses links for irony. He says "some people" in the sentence without naming them; however, he identifies them using links from the very phrase that seems to indicate that he’s not going to! (..This IS proper "irony," right?)
    Yeah, this is way anal. The point is that, particularly on blogs, links are a very grammatically semantic thing, and they can add subtle (or not so subtle) shades of meaning to their text, depending on how they’re used.

  50. Ryan says:

    I agree ‘B’ is the best option.
    But whats the big deal about not using ‘click here’ ???

  51. Liam says:

    B is by far the best.
    The big deal about using ‘click here’ is that it doesn’t describe what you are linking to. This is especially important if you are designing web sites that are expected to reach high rankings in Google.
    It’s important to get your chosen keywords into a link, as Google will use the text of incoming links to determine how relevant that page is to a search. I am unsure whether using ‘click here’ poses any accessibility issues – I’ll leave that issue for someone else ;)

  52. andy says:

    Some have asked what’s so wrong about using ‘click here’.
    As I understand it, screen readers ‘read’ hyperlinks out of context. So, a site that uses a ‘click here’ approach a few times on a page would lead the screen reader to say “click here, click here, click here”. Leaving the poor user without a clue where to go. Except to another site…

  53. tubby says:

    What the heck?!
    Wouldn’t “C” be the obvious choice??
    I build awsome websites using Frontpage, and I’ve always used the “Click Here” technique (sometimes along with the animated spinning @ symbol to signify an e-mail link)
    Think about it…
    Just kidding ;)
    B is awsome!

  54. Rahul says:

    Oh man tubby, that was nearly the end of me…

  55. nate says:

    I know I’m going to get reamed for saying this, so let me throw out a caviat first. I sincerely care about those who are disabled and are otherwise forced to use screen readers. I do have sympathy for them and am saddened by their collective plight.
    [ Here comes the hellfire ... ]
    My primary concern in creating/designing/marking-up a site is not to make sure that Grandma Gertrude’s P100 running IE 3.0 can view the page exactly as someone running Netscape 6 on a broadband connection with an Opteron 64-bit processor… What the heck is my point? Somewhere, you have to draw_the_line and say that you will not take the time or use the resources to reach a certain audience. If you don’t believe me, believe Douglas Bowman, the author of the new ALA article, “Sliding Doors of CSS,” who says:
    “…Because of this, the Sliding Doors technique suffers in version 5.0 beyond a point I’m willing to hack. Since the upgrade to IE5.1/Mac has been readily available for some time now, the percentage of OS 9 Macs still running IE5.0 should be tapering off to almost nothing.” (emphasis mine)
    Ok, so the point is made that in practicality, you have to draw the line somewhere. Now the controversial question(s):
    What percentage of people are using screen readers? Is there a large enough segment of those using screen readers (and other like devices) to justify pulling out hair? And further, how much do I take the “Click here. Click here. Click here.” phenomenon into account when designing?
    [ If you don't mind, please keep my disembowelment as painless as possible. ]

  56. Dan says:

    nate – you said “Is there a large enough segment of those using screen readers (and other like devices) to justify pulling out hair?”
    That’s like a bank owner saying “you know, how many people really can’t climb stairs? I mean, is it really worth putting this ramp in for just a few people?”
    The thing is, making a site accessible is not about pulling out hair. There are pretty concrete practices for making things easier for those with disabilities.
    Your quoting Doug’s tutorial was taken a bit out of context. Doug was talking specifically about a presentational problem and not an accessibililty problem. And I’m sure the tabs work just fine in older browsers. He’s just talking about small design details there.
    I don’t blame you for asking the question, however. It can sometimes seems as though it won’t really make a difference if you take that little extra time to make your site accessible to as many as possible. But there may be more people than you realize that will take advantage of those improvements.

  57. Rahul says:

    Another interesting point when it comes to accessibility is that it’s going to be made law very soon (not to mention it already is law in the US as far as I know, with Section 508 and all). Over here in Europe, however, it’s really being left up to individual countries as to whether or not they decide to force companies to have accessible websites. So it’s kind of hard to convince anyone they really need it unless they’re that much into the longterm plan. And then there’s who’s responsible for a site’s accessibility – the client or the designer? Do you add it to your contract as a default part of your design, eg. you will always include accesskeys in your nav menu by default? What if the client specifically asks you to remove them? That kind of thing has to be stamped out as well.
    That is, once things become a legal problem. For now, it’s just forward thinking – which is really the whole point of XHTML and CSS anyway: forward thinking so we don’t have to go back and do it all again later on. Including that small percentage in order to ensure we don’t have to go back and add accesskeys and screen reader support once it becomes law is just that much more efficient in the long run.
    Right?

  58. pete says:

    Whats so wrong with ‘C’. Granted in this example it’s not the best solution, but why should just an execution be dismissed without thought?
    Take for exmaple at list of options. Whats so wrong with…
    For a list of our red cars – Click here
    For a list of our blue cars – Click here
    For a list of our green cars – Click here
    There is a clear call to action here – its plainly obvious where the link goes. For me linking is just as much about the content of the copy as it is the execution.

  59. Ben Scofield says:

    Doesn’t the mere fact of something being a link (however links are rendered on a particular site) imply the Click Here? What else would you *do* with a link (excepting those browsers where links aren’t clicked)? My biggest beef with Click Here is that it’s redundant. Assuming you don’t have super-novice users who can’t recognize a link without an obvious label, there’s no need to add such a label.
    And a minor point: when the page is set up as Pete has (with Click Here links following their subjects), it just feels strange. Shouldn’t we have people clicking on the name of the very thing they want to see instead of just to the right of it? If I’m shooting pool, I aim at the pocket, not just to the side of it…

  60. Egor Kloos says:

    It might be just me, but I’ve never got the hang of the whole “click here” argument. Why whould you tell someone that this is a link and that you can click on it. Isn’t that just a waste of time?
    If you’d like you can overview our entire colour selection, or just select a colour here:
    View our selection of red cars.
    View our selection of blue cars.
    View our selection of green cars.
    The links themselves now actually mean something. That seems to me to make much more sense, never mind being more usable.

  61. KJC says:

    Another argument against “click here” links is for blind users: screen readers will read the links aloud.
    Hearing “click here, click here, click here” is completely useless compared to “selection of red cars, selection of blue cars, selection of green cars”.

  62. Mike says:

    My work requires a lot of browsing/extracting of information and because of that I’m using a little script (bookmarklet) which opens a new window with a list of all the links that appear in the web page I’m looking at. The links are in the form of an unordered list and are extracted as they appear on the page.

    Imagine the case where something like this appears in the page (copying pete’s example):
    View our selection of red cars – Click here
    View our selection of green cars – Click here
    View our selection of blue cars – Click here

    What I get in my link-extractor window is this:
    Click here
    Click here
    Click here

  63. pete says:

    The argument for blind readers, I’ll take on board (Thanks KJC) but Ben I think your being idealistic with the intelegence level of your user.
    Not everybody is totaly *web* savy, and uderstands that just because a word is underlined it means its a link. You must make your users think.
    Egors exmaple is a good start, but for me there is still no call to action.

  64. Jason Pearce says:

    One of my pet peeves is the useless “click here” text. Though option B is the best, A and D are at least tolerable and do not waste space or a user’s time.
    Everyone knows that underlined text means “click here.” So I favor picking any descriptive part of the sentence, even the whole block of content, over option C. Oh, adding the TITLE attribute is aways a nice bonus.

  65. Rahul says:

    Here’s something else I’ve been thinking about. Let me write it up Dan Cederholm-style… (hey, can’t we get <ul> support in this thing?)
    Presuming a simple “contact me” email link, which is the best option?
    a) <a href="mailto:abc@xyz.com">Contact me</a>
    b) Contact <a href="mailto:abc@xyz.com">me</a>
    c) <a href="mailto:abc@xyz.com">Contact</a> me
    Additionally:
    Which value for the title attribute is the best option in whatever you choose from the above list?
    1) title="Send me an email"
    2) title="Email abc@xyz.com"
    3) title="Me"
    Point being that different types of links lead to different types of coding – should we adapt the semantics for the kind of hyperlink (not that there are that many different types), or not?

  66. Ian Lloyd says:

    Something that we’ve employed at nationwide.co.uk is to link an entire phrase, but to ensure that the page doesn’t look ugly in CSS-capable browsers, only part of the link is highlighted as such. See an example in the middle of this page: http://www.nationwide.co.uk/banking/
    <a href="something.htm">This is the entire phrase but we only want to <u>underline part of it</u><a>
    The link has underlining suppressed in the CSS
    It seems to do the job for accessibility (although sometimes screen readers will read a longer link phrase twice, for some strange reason that I’ve never worked out).
    Anyway, it’s another take on the subject.

  67. TOOLman says:

    Rahul: I’d say go for a) with title option 1).
    What is the link supposed to be used for? Contacting you. Therefore, “Contact me” seems to be the best anchor text.
    The title “Send me an email” describes what action the link will result in. Option 2) might be an alternative, especially for visitors who don’t have an e-mail client integrated with their browser. Specifying the address in the title might let them see it and type it in their mail client.

  68. Rahul says:

    Ian – interesting solution, but it falls flat in XHTML 1.0 Strict. If you wanted to do the same thing in XHTML you’d have to use something like <em>link</em> and then use CSS to display it as an underline… but that still uses CSS and doesn’t set the default display to underline (mainly because there is no longer an element in XHTML that defaults its display to underlined, except the <a> tag which you’re using to link the entire sentence).
    So… it doesn’t really work, does it?
    Unless I’m overlooking something.

  69. pete says:

    Jason,
    Everybody *DOES NOT* know this. Thats a hugely wild presumption to make – and presumption is the mother of all f*** ups.

  70. Egor Kloos says:

    Well Pete it’s true that not everybody knows that underlined blue text could be a link. But there is a level of basic knowledge we can require from any user. As we do with washing machines, remote controls, camera’s and a slot machines. etc. etc.
    After all the web at it’s most basic is a page of text with underlined blue text for links. To only require that users know what a link is and what it could look like is not to much to ask. And users don’t think that it would be to much to ask either. That’s what I’ve found in user tests. In fact most users quickly find out what a underlined blue text is anyway and will also remember that it is link each and every time they come across underlined blue text. In fact even when you change the colour of the links on a page that same user who just found out what link was will still see them as a links.
    This is just one argument of the many arguments of why not to use: “click here“.

  71. Rahul says:

    Also, our users are generally humans, not monkeys. :)

  72. Andy says:

    Rahul asked which option was best for emails. Well, at the risk of opening up another can of worms, the best option would actually be:
    D: Contact me at <a href="mailto:abc@xyz.com">abc@xyz.com</a>
    … the reason being that not everyone’s browser is ‘tied’ to their browsers, and you are making it clear that it’s an email link not a link to another page.

  73. Andy says:

    Sigh.. that should have read “not everyone’s email client is tied to their browser”

  74. Rahul says:

    Good point Andy, but I was basing my options off some article I read that said that normal links should not include verbs (as the W3C QA tips page suggests), unless they’re actually promoting activity, such as email links. In that case, the article stated (too bad I can’t remember where it was), that including the verb (such as “Contact”) in the link was OK.
    In any case, I did consider the “D” option and purposefully didn’t include it in the options :) Perhaps it is the best, however.

  75. Jeremy says:

    It’s all about the B. It links directly to what the actual link is talking about, so it only makes sense to do it that way. Elsewise, it would be unfair to mislead the site viewer. At least, thats my small opinion.

  76. David says:

    Yep. B. In a link I would include the title of the page, and that’s basically what B is.
    :)

  77. Paul Yasi says:

    haha, I see I’ve caused a ruckus. The Click Here link types are used widely, though they aren’t always with the text “Click Here”, even on simplebits.com in the top right corner Dan’s got “SimpleBits is a place for Dan Cederholm to collect everything he does on the web. More” link to More… this is the same idea as a Click Here link. I think certain content may work better with a click here type of link than one with inline links.

  78. Christian says:

    To respond to Ian’s comment, as a Nationwide customer and a web designer, when I was on the site the other day, I did stop to think about the way you have your links now. It looks kind of nice, but ultimately I can’t see any benefit in doing this. Why not just have the part of the sentence that is underlined be the link and leave it at that.
    In my opinion, the Nationwide site has other usability issues that should be focused on before worrying about building fancy links.

  79. KuraFire says:

    To Paul Yasi:
    A “More…” link has much more meaning than a “Click here” link. “More” already specifies what the user can find / expect when s?he follows that link. “Click here” tells you absolutely nothing, but “More” is a great one-word description of what you can expect. Additionally, such links could (and in some cases, should) be expanded on, for instance:
    "Bla bla bla, yadda yadda, and so forth. More by $author"
    Another argument against the horrible “click here” method is the fact that not everyone uses a mouse. Clicking is not much of an option on a text browser, and you might say to that “but how many people use a text browser?” – and I’ll answer you, more than you think. On my site, there’s a lot more text browsers being used than screenreaders, for instance. Sure, they both don’t make up more than about 1-2% of all visitors, but they aren’t inexistant or anything. :)
    However, on the whole, that’s just a fairly minor argument against the use of “Click here” links. Primary ones have been mentioned already.
    As for the quiz at the top, B is the clear answer as far as I’m concerned.

  80. KuraFire says:

    Ack, forgot to say something!
    As for the email link issue that Rahul posted, I would recommend none of the options. Instead, use a contact form that people can utilize, and don’t put a real e-mail address anywhere in the site’s HTML. Spambots will pick it up and only provide more work for your spamfilter (or you, if you don’t have one, or both if your spamfilter isn’t entirely successful or reliable).
    Myself, I’d use something like this:
    Feel free to <a href="somecontactform.html">Contact me</a>
    A title in a contact-me link seems redundant to me, but I can imagine that some people find it important enough to add that to it. However, with a contact form, I’d personally not use any title like “Send me an e-mail” or so, because what if at some point I change the process of how my contact form works (without touching the form on the site, that is) and have it sent to me via something different than e-mail? Sure, the visitor doesn’t know at all how their info is getting to me, but implying that they will be sending an e-mail when they’re not does not strike me as the “best way of building sites” :D

  81. KuraFire says:

    Incredibly sorry for the triple comment, Mister Webmaster, feel free to merge them if you see fit :)
    Anyhoo, I just remembered one more (imo) important reason against “Click Here” links. Mozilla’s introduction to Type Ahead Find, or simply TAF for the mozi-fanatics.
    Type Ahead Find allows you to scour links on any webpage by simply typing the word you’re looking for, and it will find the first most-fitting link of your text. If you’re in a long page which holds many reference links, it can be easy to one day get back to that page and remember “somewhere on here was a link to an overview of used cars for sale” (random example) and then to just type “used cars”. TAF will find your link for you, but not if the actual link is “Click Here”. Because the words ‘used cars’ are not part of the link contents ‘click here’.
    With TAF becoming another large reason for many people to switch from IE to Firebird/Mozilla, I think this argument should not be overlooked.

  82. Mark Wilson says:

    Don’t assume it’s only screenreader users who suffer because of ‘Click here’ type links. Some browsers, like Opera, give you the option of showing a summary of all the links on the page in a side bar. This can be very useful for finding a particular link on a long page, but not if there’s thirty of them all labelled ‘click here’ or ‘more’.
    Firebird (and I assume other Gecko browsers) implements this as a tab on the page properties window [ctrl-J, alt-L].

  83. Mark Wilson says:

    Note: Firebird’s list of links is not clickable, but does include both the text and the URL. Opera shows the text as a clickable link.

  84. Paul says:

    The most obvious to me is B, but under no circumstances should the dreaded ‘click here’ be uttered!

  85. Peter says:

    What is the link supposed to be used for? Contacting you. Therefore, “Contact me” seems to be the best anchor text.
    The title “Send me an email” describes what action the link will result in. Option 2) might be an alternative, especially for visitors who don’t have an e-mail client integrated with their browser. Specifying the address in the title might let them see it and type it in their mail client.