Hyperlink

This page describes how to create a hyperlink. Pronounced hyppppeerrrlink because IT IS hyper.

Hyperlinks can be used to create links between pages in your website, to a certain place in a document or another website.

External website

<a href="https://wdka.nl">Go to the website</a>

Between pages in your website

<a href="./about.html">About</a>

Linking withing a page

Linking to a place in the document is super handy! You can see an example on the top of this page or on any Wiki page, like the Red Warbler.

This type of URL is called a Fragment URL. To create a Fragment URL we need two elements.

The first element is the element we scroll to. This can be any type of element, for example an h1, h2, div, span, etc.

We give the element an ID attribute, in this example the ID is "Taxonomy". You can decide how the ID is named, but it has to be unique on the page. Place the element with the ID on the position you want the page to scroll to.

<span id="Taxonomy">Taxonomy</span>

The second element is the anchor tag. This will create the link to the element with the ID. We start the href value with an hashtag #. This indicates it is an internal URL pointing to an element with that ID.

<a href="#Taxonomy">About</a>

You can also highlight the targeted element with CSS. When the link Taxonomy is clicked, the element with id="Taxonomy" will have the following styles applied.

:target {
  border: 2px solid #D4D4D4;
  background-color: #e5eecc;
}