SimpleQuiz › Smart Linking › Conclusion

Certainly some great discussion on smart hyperlinking methods. Many like B over the other three examples. I think I like this one best as well. The link is surrounding the description of exactly what it’s pointing to. Using a title attribute can be helpful if for some reason the text you’re using isn’t descriptive enough, or to name the document you’re linking to.

Option C’s use of “Click here” text was a hot topic of discussion as well. I tend to think, in general, it’s not always a good idea for the following reasons that many of the readers shared:

  • Not everyone uses a mouse to navigate a web page, therefore the word “Click” doesn’t make sense for every situation.
  • If “Click here” text is used repeatedly on a page, a screenreader that reads off a list of links found on that page would basically be saying “Click here. Click here. Click here.” over and over again. Being more descriptive about what the link is will help.
  • Visually scanning the page for links would reveal little about what is being linked to.

Another thing to keep in mind, and this was brought a few times, is how being descriptive when building links can help search engine spidering.

9 Comments

  1. Nick Finck says:

    Contextual linking is not only critical for the end user but it’s also critical for search engines and how your content will be referenced once crawled by a engine. Also check out this great chapter in Yale’s Web Style Guide:
    http://www.webstyleguide.com/style/links.html

  2. Sérgio Nunes says:

    Suggestion: a quiz for “image with captions” in HTML. It not trivial and isn’t easy to find this discussions about this on the Web.
    How be nice to watch the discussion here :)

  3. Darrek says:

    Here’s a question:
    I, too, loathe the ‘click here’ habit namely because it makes no sense out of context.
    But here’s a similiar situation that I’m struggling with. We post a lot of documents on our site, usually with two file formats. This is how I typically make the links:
    1. File name and or description: [a]Adobe PDF[/a], [a]Word DOC[/a]
    This is real nice for sighted users, but I imagine pointless for non-sighted users as all you’d hear if you’re just reading the list is “Asobe PDF, Word Doc, Adobe PDF, Word Doc, etc.”
    I thought about listing the link twice:
    1. [a]File name and or description (Adobe PDF)[/a]
    [a]File name and or description (Word Doc)[/a]
    But this takes up more space, and is still a tedious list to have read to you (albeit a bit more descriptive).
    The only other though I had was to do the first option, but repeat the filename/description in the TITLE attribute. Not sure if this would work in all readers though.
    Thoughs?

  4. Niket says:

    There are various instances where its unclear what link term to use (or how to avoid generic link terms). Some examples are:
    1. If the above Ipsum doesn’t display properly, then <a href="url">click here</a>
    2. Lorem Ipsum Document (<a href="url">Adobe PDF</a> | <a href="url">MS Word</a>)
    3. Lorem proves ipsum using <a href="url">three</a> <a href="url">simple</a> <a href="url">examples</a>.
    My take is that “click here” is never necessary. The first example could be modified as:
    Alternate copy of <a href="url">Ipsum</a> is available if the above doesn't display properly
    Example two follows “prior art” (sic). People know when faced with a case like this, they ought to look at the subject of the phrase in question. I doubt if its an issue for people using screen readers or assistive devices; people with disablities that I have encountered are much more “robust” than we think. Possible alternative for the purists could be:
    Lorem Ipsum Document (<a href="url">LID.pdf</a> 100 KB | <a href="url">LID.doc</a> 125KB)
    We may throw in an abbr for “LID” term, and/or add a meaningful title to the a tag.
    The third one also follows same logic. Sometimes, there simply isn’t a better way to do it. I personally do not prefer this style (as shown in #3 above). I’d rather use:
    Lorem proves ipsum using three simple examples (<a href="url">ex. 1<, <a href="url">ex. 2< and <a href="url">ex. 3<).
    Again, title attribute is a good friend here.

  5. Niket says:

    I am missing </a> in the third example above.
    In the second example, its better to have a descriptive pdf/doc file name. If instead I have a file named “document.pdf”, I’d still use “LID.pdf” or “LoremIpsumDoc.pdf” as a link text to make it descriptive.

  6. Laura says:

    Google linked me to this page, nice reading

  7. Shirley says:

    A little off-topic but just wanted to say I liked the layout of the site

  8. Bjoern Braendewall says:

    Darrek: How about using a table, with a scope="row" to indicate what the links correspond to:
    <table>
    <tr>
    <th scope="row">1. File name and or description</th>
    <td>[a]Adobe PDF[/a]</td>
    <td>[a]Word DOC[/a]</td>
    </tr>
    </table>

    When you think of it, it is a sort of tabular data. Especially if you have a list of links.
    (th can be replaced with td if the situation calls for it, IMHO.)

  9. Mario T. Lanza says:

    I would suggest never creating “click here” links. They’re redundant. After a few sessions online any user will come to understand that links are the pathways that make up the web. Users will come to recognize links for what they are without web designers labelling for their most basic purpose. That’d be like putting a PostIt note on every doorknob that says, “Twist and Pull.” It’s far more useful to markup the shortest phrase of text that well-describes the destination.