Concerning Hyperlinks

The hyperlink didn’t originate with the World Wide Web — the concept of linking documents goes back at least as far as 1945, and Vannevar Bush’s “As We May Think” essay — but it’s safe to say that the Web is the hyperlink’s most popular and well-known implementation. Hyperlinking lies at the very foundation of the Web. Indeed, there’d be no Web at all without it.

I’ve been online since my first encounter with the Web in my dorm’s computer lab back in 1995, and to this day, hyperlinks are still beautiful, even magical to me. There’s something quasi-arcane about selecting some text or an image, clicking the “Link” button in my editor (or, if I’m feeling old school, wrapping it in an <a> tag), and pasting in a URL. Such a simple process, and yet it unlocks endless possibilities.

With just a few keystrokes, my website is suddenly connected to something far bigger than itself. I’m able to validate someone else’s work, indicating that they’ve created something interesting, relevant, noteworthy. (And likewise if they link back to me.) For readers, that humble hyperlink becomes a portal to another realm of information and entertainment. And in the process, the Web grows in scope and richness.

Back in 2006, Jeremy Keith explained the hyperlink’s importance:

The shortest element is the most powerful. A stands for anchor. Nestled within the anchor element is the href attribute. This attribute, short for hypertext reference, is the conduit through which the dreams of Leibniz, Joyce, and a thousand conspiracy theorists can finally be realised.

Anybody could create anchors containing hypertext references. Just about everybody did. The Web grew exponentially in size and popularity. With every new web page and every hyperlink, the expanding Web became a more valuable and powerful aggregate resource.

But with great power, comes great responsibility. For as basic and simple as they seem, hyperlinks are not mere trifles. As with all things Web-related, they should be thoughtfully crafted.

In my own writing and development, I try to adhere to the following principles when creating hyperlinks. They may seem pedantic and nitpicky, and some are more subjective than others. But they make sense to me, and any such consistency ultimately benefits my readers.

Hyperlinks Should Never Be Ambiguous

This is arguably the most important thing to remember when creating hyperlinks: A user should be able to make a reasonable assumption about where a hyperlink will take them just by looking at it. Put another way, they should be able to decide if visiting a hyperlink will be worth their time, help them find what they’re looking for, etc., before they’ve clicked on it.

Practically speaking, this means using descriptive anchor text or imagery for the hyperlink’s interface, i.e., what the user actually clicks on. Ambiguous anchor text like “Click Here” and “More Info” and generic/clichéd images (e.g., arrows, chain links) should be avoided as much as possible.

A user might glean some useful clues concerning a hyperlink’s purpose and destination from other elements on the page, particularly if they’re a sighted user. However, I always try to think of a hyperlink as a discrete, self-contained element. Thus, it should communicate its own purpose regardless of what else might (not) be on the page.

Consider the previous hyperlink in this article. Looking at it, it’s reasonable to assume that clicking on it will allow you to read something Jeremy Keith wrote concerning why hyperlinks are so important. Yes, the neighboring text provides additional context, but the anchor text alone gives you the key information.

I could, of course, be a stinker and link to something other than Jeremy Keith’s article. Done sparingly, that might be humorous à la Rickrolling. But if I do it too often, I risk annoying readers, eroding trust in my writing, and losing my audience altogether. Mysterious and ambiguous links might be part of the fun on certain niche sites, like game or puzzle sites. But on a blog? Not so much.

Quotation Marks and Anchor Text

I don’t include quotation marks in anchor text unless the marks are actually part of the quoted text. Consider the following examples:

1. Back in 2006, Jeremy Keith wrote that the “shortest element is the most powerful” and I agree with him.
2. Back in 2006, Jeremy Keith wrote that the “shortest element is the most powerful” and I agree with him.

To my eyes, #1 is the better approach. The quotation marks aren’t actually part of the quote; they simply indicate its beginning and end. As such, #2 feels slightly less accurate and slightly more cluttered.

But what if I want my link’s anchor text to be richer and more detailed? (This is a legitimate SEO practice and helps search engines better understand what webpages are about.) In that case, I might do this:

1. Back in 2006, Jeremy Keith wrote that the “shortest element is the most powerful” and I agree with him.

Here, the anchor text simply must include the quotation marks because it now consists of more than the quote.

Similarly, I don’t include concluding periods and commas in anchor text, like so:

1. Back in 2006, Jeremy Keith wrote that the “shortest element is the most powerful.”
2. Back in 2006, Jeremy Keith wrote that the “shortest element is the most powerful,” and I agree with him.
3. I really enjoyed reading Jeremy Keith’s blog post about hyperlinks.

This is a purely personal preference but hyperlinks that don’t include concluding punctuation always look neater and cleaner to me.

Strike a Balance Between Succinctness and Clarity

Every Saturday, I send out an email newsletter that highlights 10 – 12 interesting and thought-provoking articles. For each article, I write a short intro that includes a hyperlink to the article followed by an excerpt and some commentary of my own. If I were going to include Jeremy Keith’s article in an upcoming issue, there are any number of ways that I might write the intro:

1. Back in 2006, Jeremy Keith gave a presentation in Copenhagen on the beauty of the humble hyperlink and its importance to the Web. Click here to read the transcript.
2. Back in 2006, Jeremy Keith gave a presentation in Copenhagen on the beauty of the humble hyperlink and its importance to the Web.
3. Back in 2006, Jeremy Keith gave a presentation in Copenhagen on the beauty of the humble hyperlink and its importance to the Web.
4. Back in 2006, Jeremy Keith gave a presentation in Copenhagen on the beauty of the humble hyperlink and its importance to the Web.

#1 is obviously out; while “Click here” is succinct, it’s too ambiguous. #2 is technically better, but long anchor text can look too busy and unwieldy. The anchor text in #3 and #4 is succinct and non-generic (good) but so succinct as to become ambiguous (bad). Therefore, I’d probably rewrite the intro altogether so that the anchor text includes more pertinent info:

1. During a 2006 presentation in Copenhagen, Jeremy Keith described the beauty of the humble hyperlink and its importance to the Web.
   
2. During a 2006 presentation in Copenhagen, Jeremy Keith explained the hyperlink’s importance to the Web.
   
3. Back in 2006, Jeremy Keith gave a presentation concerning the hyperlink’s importance to the Web.

Of these options, #2 is my favorite. To my eyes, its anchor text strikes a nice balance between succinctness and directness, and contains relevant info and keywords. But of course, there’s a certain subjectivity at play here.

While there are numerous tools out there that will try and help you figure out the best anchor text based on keywords and other analytics, this process isn’t an exact science. So many other subjective factors — e.g., voice, writing style, website tone — come into play when writing anchor text. And yes, at the risk of contradicting myself, there may even be times when “Click here” is, in fact, the best option.

Use the Right HTML

So far, I’ve just been talking about a hyperlink’s content and styling. But what about its code? This gets into some technical territory that’s probably less relevant to writers and editors who use their CMS’ WYSIWYG or Markdown editor to add hyperlinks to posts and pages. If, however, you’re a developer who’s creating editing tools or generating HTML output (via CMS templates, perhaps), then this section’s for you.

Essentially, hyperlinks should always be created using a properly formed <a> tag, like so:

<a href="https://opuszine.us/">Opus</a>

You’ve got the opening and closing <a> tags wrapped around the anchor text, with an href attribute containing the URL that is the hyperlink’s destination. Basic “Web Development 101” stuff, in other words.

Now when I said “always,” I meant it. I’m hard-pressed to think of a situation where you wouldn’t use an <a> tag for a hyperlink. But web developers can be too clever for their own good, and as a result, you occasionally see nonsense like this:

<a href="#" onclick="location.href='https://opuszine.us';">Opus</a>
<a href="javascript:location.href='https://opuszine.us';">Opus</a>
<button type="button" onclick="location.href='https://opuszine.us';">Opus</button>
<div onclick="location.href='https://opuszine.us';">Opus</div>

And that’s just using plain HTML and vanilla JavaScript. The rise of frameworks like Angular, React, and Vue have made possible whole new ways of replicating and otherwise bastardizing hyperlink functionality.

While the above examples work — clicking on them will take you to the Opus homepage — they’re all bad ideas. They overcomplicate things, injecting roundabout approaches and requiring more code to accomplish what the <a> tag just does by default. (And that’s to say nothing of the accessibility issues that they pose.)

I opt for the tried and true: using HTML tags for their intended purposes. That means using well-formed <a> tags for hyperlinks, <button> tags for submitting forms and launching JavaScript-powered functionality (e.g., opening/closing modals, toggling the display of page elements), <div> tags for generic wrappers and containers, and so on.

This is often referred to as “semantic HTML,” and it’s long been an important part of creating websites that are stable, easy to maintain, SEO-friendly, future-proof, and performant. (See also the “Rule of Least Power.”) Though not as sexy as the latest JavaScript framework, it gets the job done and ensures accessibility and usability for the broadest audience possible, regardless of browser, device, or (dis)ability.

It’s tempting to over-think things in web development, even something as fundamental to the Web as linking to other webpages. There seems to be this notion that more complicated equates to more modern, professional, etc. Which is how you get labyrinthine build processes, multiple layers of dependencies, overly-convoluted tools, and bloated websites.

Sometimes — sometimes — such complexity is warranted. Speaking as someone who’s worked on numerous web-based tools and SaaS apps, I definitely don’t want to downplay the complexity involved in building robust and secure web platforms and applications. That said, the Web’s simplest approaches and most basic building blocks — like the humble little <a> tag — can often be what you really need in a given situation, provided they’re used correctly and consistently.

The hyperlink is a powerful and essential aspect of the Web. It makes the Web what it is: an intricate network made up of nigh-infinite connections, all of which allow us to instantly access and retrieve all manner of information, from the vital and relevant to the obscure and trivial. Because of the hyperlink’s ubiquity, though, it can be easy to overlook.

But if there truly is a shift away from social media and a return to personal blogging, then how we create hyperlinks becomes increasingly important. The next time you’re writing a blog post, take a few moments to think about the hyperlinks sprinkled throughout it. Make sure they’re clear and succinct, with helpful and relevant anchor text and imagery as well as consistent structure and grammar. And if you’re a developer, make sure you’re using the proper HTML markup for all of your elements, hyperlinks included.

As trivial as they may seem, these approaches can help make your website more usable and accessible, and improve the Web for everyone.