The anchor element

First alphabetically and first in importance is the HTML <a> element. The <a> element is what makes the World Wide Web a Web that is both Worldly and Wide. It puts the dub, the dub, AND the dub in the dub dub dub.

Sometimes, the <a> is referred to as a hyperlink, or simply a link. But it is not one of these and people who say it is one are technically wrong (the worst kind of wrong).

Just as the tunnel that connects England to France is not itself either England or France, a “link” denotes a relationship, not a place. The “a” stands for “anchor” and we are supposed to think of the <a> element as the anchor at the end of a link connected to the boat that is a resource (something that lives somewhere on the web).

“The boat that is a resource??”

If you are not entirely satisfied with this anchor/boat metaphor, you are not alone. But it is too late to register your distaste, since the anchor element was standardised as part of the HTML language in the mid 1990s. Standardised means agreed to be a certain way for everyone.

In the 1990s there was no social media, meaning there was nowhere for you to announce “I think we should rename the anchor element”, then have multiple people publicly explain to you how this would break billions of existing web pages incorporating anchors in their current form.

Some HTML elements just have opening tags (like <a>) and closing tags (like </a>; note the /) with some text in between.

<a>Somewhere on the web</a>

The tag parts are a type of metalanguage called markup, hence Hypertext Markup Language (HTML). They provide information about the information sandwiched between them. In this case, they are saying, “this here, where it says “somewhere on the web”, is an anchor, although you’ll probably call it a link, which is technically wrong, but I get it.”

But beware! In the case of the <a> element specifically, the tags alone would make for a sandwich of absolutely no nutritional value. That’s because there’s nothing included here to say which metaphorical boat the anchor is connected to.

Fortunately, <a> is specified to work with something called href, short for hypertext reference. An href is both an attribute and a property of the <a> element. Fans of the English language will be aware these two words are synonyms. However, in HTML they have subtly different meanings (just to be difficult).

A human being (or, rather, a text editor or computer program on behalf of a human being) should write out an href as part of their <a> element. At this stage, the href is an attribute.

<a href="https://boat.me/boat.html">My anchor element</a>

Attributes are easy enough for humans to read—even human beings told they “can’t code” because they have mammary glands or are more than 32 years old. But computers have a harder time. So the first thing the computer does is convert your HTML into tree-like structures called objects. Computers love objects because they can crawl up and down their branches really quickly, like a fast sloth.

Objects can contain other objects and have properties. The <a> element is a type of object called a node and the href is another node belonging to that element as a property. This has very, very little to do with the Node.js JavaScript Runtime Environment. “Woah wait, what’s that? It sounds cool!” It is not cool, and you do not need to know about it right now (or possibly ever).

Anyway.

What happens if you click an <a> element without an href? Absolutely nothing, thanks, see you later. In fact, people who like to click anchors using a keyboard (they exist!) won’t even be able to. Why? Because the browser won’t let them focus the element (move over to it using the Tab key). Why bother the keyboard user with an anchor that doesn’t do anything?

More to the point, what happens if you click an <a> element with a requisite href? Well, a somewhat complex set of events are set in motion involving resource locators, protocols, and something called packet switching.

Not knowing about all those details doesn’t mean you’re not entitled to make web pages! Not any more than not knowing how to sequence frog DNA means you’re not entitled to be a frog. Just practice your ribbiting (writing good HTML), leaping several times the length of your own body into the air (making good interfaces on top of that HTML) and spawning lots of tadpoles (publishing lovely websites).

But, basically, it works like this: the bit inside the href’s quotation marks is the attribute’s value. For href, it identifies the location of something on the web. When you click the link it goes and fetches it for you. If you’re lucky it’s another web page to read, an image to admire, or a video to enjoy. If you’re unlucky, it’s a PDF. Literally *all PDFs should be web pages instead.

(*According to advice published by the National Health Service, the human body can safely absorb up to 4 web-based PDFs per month. Any more than 4 PDFs is liable to cause lasting damage to the liver, pancreas, and shoulder blades.)

So far, we have covered the element’s opening and closing tags and its most important attribute/property. That just leaves the text part, which nobody wants to talk about because it doesn’t feel like the sort of thing you write from behind a neon tinted visor. Like code does.

But what if I referred to the text as a text node? Does that help? Yes, much more cyberpunk. Elements, attributes, and even bits of text are all objects based on a primordial class called Node.

An <a> is an interactive element (well, it is if it has an href). The text inside an interactive element is sometimes referred to as a label since it should tell you what the element does. Since anchors take you places on the web, the text should tell you where you would be going or what you can do there.

For example, if the href is pointing to https://eelslap.com, the text should say something like:

What you don’t want to do is something like:

<a href="https://eelslap.com">Click here</a> to slap someone with an eel.

or

You’ll have <a href="https://eelslap.com">a lot of fun</a> slapping someone in the face with an eel.

or

If you ever dreamt of slapping someone with an eel, `<a href="https://eelslap.com">this website</a>` has you covered.

Web developers and content editors, the world over, make the mistake of not making text that describes a link actually go inside that link. This is collosally unfortunate, given it’s the main thing to get right when writing hypertext.

Not everyone is a fan of my writing. But if you found this article at all entertaining or edifying, I do accept tips. I also have a clothing line: