What is a Hyperlink?

Often shortened in conversation to ‘link’, the hyperlink is the core concept/technology that allows the web to operate.

A hyperlink connects one webpage to either; another document (webpage or file), or a different part of the same document.

Signifying a hyperlink

A hyperlink is typically signified by an underline. For this reason, when formatting text for web display, avoid the use of an underline for emphasis. Instead, set content in a bold or italic/oblique variant of the body copy typeface.

A guide to writing hypertext

When to add in-text links

A link within the main content of a webpage (rather than as part of the navigation framework), is referred to as an in-text link.

An in-text link should only be added when it supports a likely task, given the context and content of the current webpage.

For example, in-text links may be appropriate when linking to:

• essential background/contextual information, or
• references and definitions (similar in function to footnotes/endnotes).

Authors that are new to writing hypertext often fall into the trap of adding in-text links that are incidental or contrary to the purpose of the content.

For example:

(A) The board of directors [destination: Board bios] were presented with a report on new initiatives that have seen an increase in market share. (excerpt from meeting minutes)

In example (A), the focus of the content is the meeting proceedings—the qualification and experience of the board members is incidental (it would be more appropriate to provide a link to the report).

(B) This section of the website does not contain information on New Zealand wildlife[destination: Info on New Zealand wildlife]. (excerpt from welcome text)

In example (B), linking to information on New Zealand wildlife is contrary to the intention of the sentence. If scanning the webpage, the user is likely to assume that the page does provide information on New Zealand wildlife.

Choosing link text

Links as in-text headings: Why you should avoid ‘click here’

As a user scans a webpage, links act as ‘in-text headings’, they help to describe content and orientate the user to the information space. Effective hyperlinks use words that succinctly describe the destination content. For example, compare the paragraphs below;

(C) Click here for The Makeawebsitehub WordPress Glossary. The glossary provides information on internet communication. For a social media image guide click here, and for the best WordPress hosting reviews click here.

(D) Makeawebsitehub.com provides a number of online resources, including the WordPress Glossary. The Resources section also features a how to start a blog guide and links to useful WordPress tutorials as well as an extensive guide on how to make money online.

In example (C), scanning the link text does not provide meaningful cues as to the nature of the content, instead the reader is left with a vague compulsion to ‘click here’ (×3).

In example (D), the link text describes the destination content, reading only the link text the reader will be able to decide whether this content (paragraph) is likely to provide ‘what they are looking for’.

KEY TERM: ‘LABEL’

In the nomenclature of information architecture, the textual content of a link is referred to as its label.

Prompts such as ‘click here’ draw unnecessary attention to how the web ‘works’—its mechanics. Although a technique favoured by used car salesmen (‘Look here’), reference to the mechanics (no pun intended) reminds the view/user of the medium and interrupts the flow of the communication.

(The use of ‘click here’ as a call-to-action in banner advertising speaks more of the quality of banner design and a desire to capitialise on naive users than it does of usability best-practice.)

Do not presume…

Links are often provided to enable a user to quickly navigate within a webpage or between a series of webpages. These links include:

• intra-page navigation: for example, to ‘jump’ to the top of the current page or to content elsewhere on the same page,
• links between webpages that are parts of a larger document, or
• links to content indexes, e.g.; ‘all articles’, ‘action/adventure films’.

In the interests of brevity these types of link are often truncated, resulting in labels that seem to presume to know how the reader browses the web; how they have linked to the current page; how they scan page content; or even a combination of the two, for example:

• ‘Back to top’
• ‘Previous’
• ‘Next’
• ‘Return to section name’
• ‘Return to top’

Of no fixed abode

Increasingly, users link to a webpage from a search engine results page, and may even be scrolled to the anchor nearest the keyword they have entered. Unless the link destination is generated programmatically, they may never have been to the top of the page, nor have come from wherever the in-page ‘return’ link is pointing to.

Omission of context also compromises usability, for example, the label ‘back to top’ may be variously interpreted as linking to:

• the homepage of the current website,
• the first page of the current section, or
• the top of the current page.

Trigger words

An additional issue with the terms ‘back’ and ‘forward’ is that these word are used in toolbar navigation for options that step the user through their browsing history. In particular, ‘back’ is a powerful ‘trigger’ word for less-confident users (as it is synonymous with ‘the known’).

Navigation links that use trigger words are more likely to be conflated with the function of the corresponding toolbar option, i.e. the user may expect that the in-page ‘Back’ link will step them through their browsing history.

Ideally use labels that clearly describe the destination, e.g.

Intra-page navigation

Page top or top of page

When linking to content elsewhere on the same page, use the text of the nearest heading, or a (judiciously) truncated form of the same, e.g. Choosing link text

Previous/next page navigation

Use the title of the destination page (or section) as the hyperlink and either unlinked text or an image to illustrate the relationship between the pages:

Next: Our company profile

Board of directors | Company profile

Content indexes

Use the plural form (of the subject/information ‘type’) or append a term that makes clear that the user will be taken to a content index:

• All articles
• More journal entries (from a journal entry)
• Press release archive
• Factsheet index

Hypertext and sentence structure

The ‘click-here plague’ can partially be attributed to the structure (syntax) of written language where a sentence may begin with a subject/object (noun) and conclude with a description (adjective), for example:

(E) The Makeawebsitehub WordPress Glossary is informative and useful.

‘The Makeawebsitehub WordPress Glossary’ is the subject, and it is described with the adjectives ‘informative’ and ‘useful’.

When a hyperlink is added, the sentence changes from a (passive) description to an active invitation (to click):

(F) The Makeawebsitehub WordPress Glossary is informative and useful.

Without restructuring the sentence, a user following the above link will affect the cognitive equivalent of cutting the speaker off mid-sentence. To support more courteous behaviour, the sentence can be restructured, to begin with description and conclude with the object:

(G) For an informative and entertaining insight into internet communication, see The Makeawebsitehub WordPress Glossary.

This structure enables the reader make an informed decision to follow the hyperlink, without re-reading the sentence.