A website consists of several pieces of information that exist in different sections and on different pages within it.
Some information relating to the website can also be found on pages that are on a different website.
All these sections and pages are linked together in HTML using the
In this article, we'll look at the term Hyperlink. Then we'll learn about the different ways of creating hyperlinks, what
href does, and how to appropriately use the
href attribute for linking sections and pages.
What are Hyperlinks?
In HTML, there are various forms of links. In images, there is the
src attribute to "link" the source of an image.
For stylesheets, there is the
link tag with the
href attribute to "link" the source of a stylesheet.
For anchor tags, there is the
href attribute to "link" the referenced section or page. Anchor links are also called hyperlinks.
When a user follows a hyperlink, they are said to be navigating. Hyperlinks are elements that reference another document, such that when a user clicks on that element, they are directed to the new document.
Different ways of creating hyperlinks
As stated above, you may want to link pages (in the website or externally) or sections in a website.
In this article, I'll highlight three ways of creating hyperlinks. These several ways are important to know because they determine the values of the
Alright, let's look at those three different ways now.
1. Linking sections of a page
You might use this method, for example, when you're creating a page with a table of contents like you see in the image below:
In this case, you may not want your readers to have to scroll down to the last section. It would be nice if they could just click on it in the table of contents and the browser would take them there directly.
This type of linking occurs in the same document, and just takes the reader to different sections. We'll learn how to create a hyperlink for this use case when we learn about the
2. Linking to another page within a website
On your site, you might have a home page, about page, services page, and other types of pages. This method helps users navigate from one page to another.
3. Linking to external pages
Sometimes, your website may not contain certain information and another website may have it. In such cases, you might want to reference the other website.
To do this, you would create an external hyperlink that navigates the user to the other website.
These are the three major ways of linking pages. Let's now see how the
href attribute can help you enable them.
href is an attribute used to reference another document. It can be found on
link tags and
href attribute is used on anchor tags (
a) to create hyperlinks in websites. The value of the attribute contains the URL which the hyperlink points to. It is used like so:
However, the URL values can be different depending on what you're pointing to. For the three ways we looked at earlier, let's see how
href can be used.
1. How to use
href to link sections within a document
In this case, the value will be the
id of the element that starts the section. That means we will have something like this:
<a href="#second-section">Go to second section</a> <!-- Some stuffs here --> <section id="second-section"> <h2>Second section</h2> </section>
When the "Go to second section" hyperlink is clicked, the browser scrolls down to the section with the associated
id. Also the URL in the URL bar of the browser changes.
For example, if the previous URL was
mywebsite.com, the new URL will be
2. How to use
href to link pages within a website
href this way, you need to understand what Relative URLs and Absolute URLs are.
Relative URLs are short URLs that point to a document on the same website. It's more like, from where you are, how do you get to this other place on the same website?
This is in contrast to Absolute URLs. For these, you aren't concerned with where you currently are – you provide the full details to get to another place like you were starting from the beginning.
For navigations between pages that live on a website, you can use any of these URLs, but Relative URLs are commonly used.
Say you're on the home page, and you want to reference the about page. Here's how to use the
href attribute to do that:
<a href='/about' >About page</a>
From the homepage (say
mywebsite.com), the above link will navigate to
There's something worth noting about the slash (
/) before the link. The
/ tells the browser to append the link to the root of the site (which is the domain). So the root is
mywebsite.com and the link is appended like so:
If the slash was absent (
<a href='about'>), the browser would replace the current path with
For example, if we were currently on
mywebsite.com/projects/generator, and we had the following links:
<a href='about'>About 1</a> <a href='/about'>About 2</a>
"About 1" would navigate to
mywebsite.com/projects/about (replacing the current path
/generator) and "About 2" would navigate to
3. How to use
href to link to pages on another website
Since it's on a different website, there's no way we can use Relative URLs. For this, we need to specify the absolute source of the document we are referencing.
For example, say we're on
mywebsite.com, and we want to reference
google.com, this is how we'd do it with
If we had only written
google.com, the browser would treat it as a page within a website, thereby appending it to
In this article, we've seen how the
href attribute allows us to create different types of links. These various links show the different ways that documents/pages can be referenced within a website.