3.3 HTML Links

Links are essential in HTML, as the Web was initially designed to be an information network of documents linked between each other.

The “HyperText” part of HTML defines what kind of links we use: hypertext links, a.k.a hyperlinks.

In HTML, links are inline elements written with the <a> tag.

The href attribute (hypertext reference) is used to define the target of the link (where you navigate to when you click).

<p>
  To search for something, visit <a href="https://www.google.com">Google</a>.
</p>

Links are the primary interaction of a webpage: you navigate from one document to another by clicking on links.

There are 3 types of target you can define.

• anchor targets, to navigate within the same page
• relative URLs, usually to navigate within the same website
• absolute URLs, usually to navigate to another website

Anchor targets

Anchor target to navigate within the same page. By prepending your href with #, you can target an HTML element with a specific id attribute.

For example, <a href="#footer"> will navigate to the <div id="footer"> within the same HTML document. This type of href is often used to navigate back to the top of the page.

Relative URLs

If you want to define a link to another page of the same website, you can use relative URLs.

But relative to what? Well, relative to the current page.

Let’s use a simple example where the folder my-first-website contains 2 HTML files:

• my-first-website
  • home.html
  • contact.html

In home.html, you want to define a link to contact.html.

As the two files are in the same folder, you can simply write in home.html:

<p>
  Go to the <a href="contact.html">contact page</a>.
</p>

On an actual website, the process is similar.

Let’s say you have a website called https://ireallylovecats.com on which you have 2 webpages: index.html and gallery.html:

• ireallylovecats.com
  • index.html
  • gallery.html

In index.html you could write the following link:

<p>
  Visit the <a href="gallery.html">Gallery</a>!
</p>

Remember: websites are hosted on computers just like the one you’re currently using. They are simply called “servers” because their sole purpose is to host websites. But they still have files and folders like “regular” computers.

Absolute URLs

If you wanted to share your cats gallery with a friend, you wouldn’t be able to just send gallery.html, as this relative URL only works for HTML documents that are on the same computer or same domain.

You need the complete URL to your HTML document: https://ireallylovecats.com/gallery.html.

This URL can be segmented in 3 parts:

• protocol https://
• domain ireallylovecats.com
• file path gallery.html

This absolute URL is self-sufficient: no matter where you use the link form, it contains all the information required to find the correct file, on the correct domain, with the correct protocol.

You usually use absolute URLs defining a link from your website to another website.

In your https://ireallylovecats.com/gallery.html file, you could write:

<p>
  Find more images of my cats on my <a href="https://twitter.com/ireallylovecats">Twitter account</a>!
</p>

Relative or absolute links?

Let’s say you want to link from the first to the second. The most direct approach is to use the absolute URL. So you add <a href="https://ireallylovecats.com/gallery.html">Go the second page</a> in your index.html file.

Because the two files are in the same directory, you could use the relative URL by using <a href="first-blog-post.html">. This is useful if you decide to move your directory: your links won’t be broken because the link targets are relative to each other, as long as you move both files simultaneously and keep them in the same directory. This relative approach is particularly useful when switching domains.