Hi. Learning to write better hypertext copy has been a "work in progress" for me, to be sure. When I look at my earlier posts in the MTA weblog, I can see how my skills with using hyperlinks have gradually improved over time. Today I would like to share some of the insights I've gleaned along the way.
Let's address our preliminary definitions first: a hyperlink is formally defined by Wikipedia as "a reference in a hypertext document to another document or other resource." In the HTML 4.01 specification, the a (for anchor) tag is used to create hyperlinks.
For those of you who want more information on the a tag, you can learn more at the W3Schools Web site, you can perform a Google query, or you can purchase a good book on HTML (I would strongly recommend Elizabeth Castro's fantastic HTML for the World Wide Web with XHTML and CSS : Visual QuickStart Guide from Peachpit Press). Now then—on with the show.
Link Descriptively
In the earlier days of this weblog, I often made the mistake of calling out my hyperlinks nebulously. What I mean by this is instead of providing my readers with context where I was sending them to with a given hyperlink, I would instead (in an admittedly lazy fashion) simply instruct them to depress their pointing devices hither and thither with "Click here" sorts of hyperlinks. Not cool. Consider the following examples of poor and better hyperlink style:
Poor style: You can read about some of my favorite comedy films by clicking here, here, and here.
Better style: Some of the recent films I've enjoyed include Happiness, Munich, Hated, Videodrome, and Match Point.
Can you see what I'm talking about, friends?
Avoid Referring to Actions in Your Links
Another, more subtle, mistake I've made with my hyperlinks is misplacing my hyperlinks by locating them on verbs or verb phrases instead of the noun subjects. Viz.:
Poor style: Please check out Wikipedia for more information. Wiktionary is pretty good as well; see for yourself!
Better style: Please check out Wikipedia for more information. Wiktionary is pretty good as well; see for yourself!
The pith instruction here according to experts such as the W3C and Tim Berners-Lee is to avoid referring to mechanics in your hyperlink text. Speaking for myself only, I appreciate this advice deeply.
Include Meaningful TITLE Text
The title attribute of the a tag is helpful and advisable for an online content developer because it helps to notify readers as to the target of a given hyperlink. The target is triggered through the mouse hover event.
For instance, the following graphic displays the HTML code I used to create this link to the Oxford English Dictionary Web site. Note that the title attribute can appear before or after the href (hypertext reference) attribute within the a tag:
The title attribute is optional, is a courtesy, and isn't fool-proof. By 'fool-proof' I mean that a malicious author can supply a 'dummy' title and dupe a gullible reader into clicking a hyperlink and browsing to Web sites that are unknown, in all likelihood unwanted, and quite possibly dangerous. Savvy Web surfers always hover over hyperlinks and refer to the status bar in their Web browsers, which report the hyperlink's underlying href attribute.
On a somewhat related note, I'll take the calculated risk of "preaching to the choir" by reciting the chestnut that suggests we always use the alt (alternate text) attribute with the img tag whenever we include non-text elements in our Web pages. This courtesy greatly assists folks with sub-par Internet connectivity or those for whom graphical gelt is not of principal importance to their Web browsing.
In the image I've provided a bit earlier in this blog post, for instance, I've included the alt text "Hyperlink text with TITLE attribute." You can prove this to yourself by hovering your mouse cursor over the image until the text appears in a tooltip.
Consider Link Styling
As a final note, I wanted to pass on a recommendation I read somewhere (I believe it was Jakob Nielsen) regarding modifying the Cascading Style Sheets (CSS) code underlying your site such that your hyperlinks are easier for your readers to locate on your pages.
I have field-tested this technique at MTA. In the past I've experimented with changing up the background color for links to help them 'pop' when visitors hover over them. However, with my current WordPress template, I've concluded that 'less is more,' and opted to leave the CSS in its default format. For example, you'll notice that the hover event styling for my hyperlinks involves a subtle color change and underline formatting.
In conclusion, I believe that good hyperlink style is one of the many hallmarks of a "reader-centered" online content developer.
Additional reading:
- W3C: "Don't use 'click here' as link text"
- W3C: Link text guidelines
- Tim Berners-Lee: "Avoid Talking About Mechanics"
- Jakob Nielsen: "Top Ten Mistakes in Web Design"
- Jakon Nielsen: "Guidelines for Visualizing Links"
- Jakon Nielsen: "Change the Color of Visited Links"
Technorati Tags: hypertext, hyperlink, html, xhtml, style, usage, grammar, writing, blog, weblog, internet, english, communication
Post a Comment