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
href attribute (hypertext reference) is used to define the target of the link (where you navigate to when you click).
To search for something, visit Google.
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 target to navigate within the same page. By prepending your href with
#, you can target an HTML element with a specific
<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.
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:
home.html, you want to define a link to
As the two files are in the same folder, you can simply write in
Go to the contact page.
On an actual website, the process is similar.
Let’s say you have a website called
http://ireallylovecats.com on which you have 2 webpages:
index.html you could write the following link:
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.
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:
This URL can be segmented in 3 parts:
- file path
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.
http://ireallylovecats.com/gallery.html file, you could write:
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="http://ireallylovecats.com/gallery.html">Go the second page</a> in your
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.