Ole Jørgen Bakken

The anchor element

An element used to create a link.

From the anchor spec

If the a element has an href attribute, then it represents a hyperlink (a hypertext anchor) labeled by its contents.

If the a element has no href attribute, then the element represents a placeholder for where a link might otherwise have been placed, if it had been relevant, consisting of just the element's contents.

Useful attributes

The download attribute makes the browser download the document referred to. Take my favicon for example: download my favicon. In this example the file gets it's name programmatically using the resource URL.

You can, however, specify the filename using the download attribute. Take this link for example: download my awesome favicon. The href is still the same, but I've changed the value of the download attribute: download="an_awesome_favicon.png".

<!-- Programmatically determined file name -->
<a href="https://lmfaole.party/img/favicon.png" download>

<!-- Custom file name -->
<a href="https://lmfaole.party/img/favicon.png" download="filename.png">

href

The href is the backbone of the entire thing that is a link. There are a number of use-cases:

Start a user action

<!-- Actions -->
Call numbers: <a href="tel:12345678">Call me<span class="sr"> (test link)</span></a>
Send an SMS: <a href="sms:12345678">Send me a message<span class="sr"> (test link)</span></a>
Start composing an e-mail with a predefined address: <a href="mailto:olejorgenbakken@gmail.com">Send me an e-mail</a>

<!-- Parts of a document -->
Go to an element with an id: <a href="#useful-attributes">Go to the attributes section</a>
Go to a specific piece of text in a document: <a href="https://en.wikipedia.org/wiki/Vinstra#:~:text=The%20village%20of%20Vinstra%20was%20granted%20the%20status%20of%20a%20%22town%22%5B1%5D%20on%201%20September%202013%2C%20an%20event%20that%20was%20celebrated%20for%203%20days.">Feast your eyes on a fun fact about my hometown</a>
Go to a specific timestamp in a piece of media: I love <a href="https://youtu.be/1NxyVkRC0MA?t=129" target="_blank">Pattie Labelle and Mariah Carey's on-stage banter during this live performance</a>

rel

The rel attribute defines the relationship between a linked resource and the current document.

MDN

There are a bunch of fun stuff here. Some highlights from specification (described by the MDN article) include:

  • alternate: Alternate representations of the current document. Especially useful for documents in different languages than the current one.
  • author: Author of the current document or article.
  • external: The referenced document is not part of the same site as the current document.
  • help: Link to context-sensitive help.
  • me: Indicates that the current document represents the person who owns the linked content.
  • next and prev: Indicates that the current document is a part of a series and that the next/previous document in the series is the referenced document.
  • tag: Gives a tag (identified by the given address) that applies to the current document (like at the bottom of this post!).

hreflang

The hreflang gives a hint about the language of a linked document (for example this forum post about the 2011 Norwegian butter crisis).

Manuel Matuzovic has written a great article about some basics of HTML over at HTMHell, where he gives some reasons why might want to use hreflang.

<a href="https://freak.no/forum/showthread.php?t=206290" hreflang="no">forum post about the 2011 Norwegian butter crisis</a>

target

The target attribute defines where to open the link, you've probably encountered (and hated) this a bunch. The most used ones are:

PS: Kyrylo Silin has written a post about why target values use underscores.

<a href="https://en.wikipedia.org/wiki/Rickrolling" target="_self">Get kinda rick-rolled</a>
<a href="https://en.wikipedia.org/wiki/Rickrolling" target="_blank">Get kinda rick-rolled</a>

Attributes not mentioned

  • ping: Used mostly for tracking. Not really that interesting to me, at the time of writing this, anyway.
  • referrerpolicy: cross-origin stuff makes my head hurt. I'll learn it when I need to, ok?

Resources