DEV Community

Cover image for How to Create Hyperlinks(in HTML)
Karl Esi
Karl Esi

Posted on

How to Create Hyperlinks(in HTML)

#html #webdev #beginners #programming

Almost every web page on the internet has links to other pages or websites. To create these links, we use the anchor element.

<a href=""></a>
Enter fullscreen mode Exit fullscreen mode

Every anchor element should have an href attribute. href is short for hypertext reference. It basically means a URL or a link.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE-edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="keywords" content="HTML, CSS" />
        <meta name="description" content="This is a simple HTML and CSS project" />
        <title>Document</title>
    </head>
    <body>
        <a href=""></a>
    </body>
</html>
Enter fullscreen mode Exit fullscreen mode

Image description

In this demo, I am going to create a second page called about.html and then link to it over here.

So, here in the explorer panel, let's add a new page called about.html:

Image description

Here, we are going to create a basic HTML boilerplate.

Empty about.html in VS Code

Now, let's create it.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body>

    </body>
</html>
Enter fullscreen mode Exit fullscreen mode

HTML Boilerplate in about.html on VS Code

Back to index.html:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE-edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="keywords" content="HTML, CSS" />
        <meta name="description" content="This is a simple HTML and CSS project" />
        <title>Document</title>
    </head>
    <body>
        <a href=""></a>
    </body>
</html>
Enter fullscreen mode Exit fullscreen mode

The index.html code on VS Code

Here, we can use a relative or an absolute URL. What do I mean by that? Well, a relative URL starts from the current page. So, currently, we are on index.html and we want to go to about.html.

Now, currently, both these pages are in the same folder.

About.html and index.html on the same folder as shown on VS Code Explorer tab

We can type an absolute URL to about.html like this.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE-edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="keywords" content="HTML, CSS" />
        <meta name="description" content="This is a simple HTML and CSS project" />
        <title>Document</title>
    </head>
    <body>
        <a href="about.html"></a>
    </body>
</html>
Enter fullscreen mode Exit fullscreen mode

Added the absolute URL about.html

That's an absolute URL.

Now, what if about.html was in a different folder?

So, let's add a new folder to our project called company:

Added the folder company to our project on VS Code

We then move about to this folder by dragging-and-dropping.

Moving the about.html to the folder company on VS Code

Where is about.html relative to this page? It is inside the company folder.

The about.html is now inside the company folder

So, here we type company/about.html:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE-edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="keywords" content="HTML, CSS" />
        <meta name="description" content="This is a simple HTML and CSS project" />
        <title>Document</title>
    </head>
    <body>
        <a href="company/about.html"></a>
    </body>
</html>
Enter fullscreen mode Exit fullscreen mode

Typing company/about.html in the href on VS Code

This is a relative URL.

For the Full eBook, get it here

Now, let's give this link some text. I am going to call it About Me So, we type our text inside the anchor element.

<a href="company/about.html">About Me</a>
Enter fullscreen mode Exit fullscreen mode

This is how it looks on VS Code:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE-edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="keywords" content="HTML, CSS" />
        <meta name="description" content="This is a simple HTML and CSS project" />
        <title>Document</title>
    </head>
    <body>
        <a href="company/about.html">About Me</a>
    </body>
</html>
Enter fullscreen mode Exit fullscreen mode

company/about.html in the href on the anchor tag of About Me on VS Code

Back to the browser. Here is our link:

The About Me link on the browser page

When you click it, it takes you to the about page which is empty.

The about.html page on the browser that is blank

Instead of text, we can use an image element.

I am going to delete About Me:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE-edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="keywords" content="HTML, CSS" />
        <meta name="description" content="This is a simple HTML and CSS project" />
        <title>Document</title>
    </head>
    <body>
        <a href="company/about.html">

        </a>
    </body>
</html>
Enter fullscreen mode Exit fullscreen mode

Deleted the About Me text in the anchor tags on VS Code

and add an image element instead:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE-edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="keywords" content="HTML, CSS" />
        <meta name="description" content="This is a simple HTML and CSS project" />
        <title>Document</title>
    </head>
    <body>
        <a href="company/about.html">
            <img src="" alt="">
        </a>
    </body>
</html>
Enter fullscreen mode Exit fullscreen mode

Added an image element inside the anchor tags in VS Code

Once again, here we can type a relative URL to our target image.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE-edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="keywords" content="HTML, CSS" />
        <meta name="description" content="This is a simple HTML and CSS project" />
        <title>Document</title>
    </head>
    <body>
        <a href="company/about.html">
            <img src="Images/altumcode.jpg" alt="">
        </a>
    </body>
</html>
Enter fullscreen mode Exit fullscreen mode

A relative URL to our target image on VS Code

Here is how it looks:

The image on the browser page

Well, this image is way too big. We can always use CSS to resize it. But, that aside, we get the mouse icon when we hover over this image. It changes to a hand to indicate that this image is clickable.

Now, back to our code. To keep things simple, I am going to get rid of this image and get back to our text.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE-edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="keywords" content="HTML, CSS" />
        <meta name="description" content="This is a simple HTML and CSS project" />
        <title>Document</title>
    </head>
    <body>
        <a href="company/about.html">About Me</a>
    </body>
</html>
Enter fullscreen mode Exit fullscreen mode

Removed the image and added our text back on the anchor tag in VS Code

Let's go to the about page and add a link back to the home page.

So, over here:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body>

    </body>
</html>
Enter fullscreen mode Exit fullscreen mode

HTML boilerplate on the about.html page on VS Code

We are going to add an anchor element:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body>
        <a href=""></a>
    </body>
</html>
Enter fullscreen mode Exit fullscreen mode

Added an anchor tag in the body on VS Code

What should we type for the href attribute? Well, currently, we are inside the company folder. We have to go one level up, so that we can access index.html

To do that, we type ../ With this, we can go one level up.

<a href="../"></a>
Enter fullscreen mode Exit fullscreen mode

We can then reference index.html and for the text, we are going to say home page.

<a href="../index.html">Home Page</a>
Enter fullscreen mode Exit fullscreen mode

Again, this is another example of a relative URL, because it starts from the current page, and goes somewhere else.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body>
        <a href="../index.html">Home Page</a>
    </body>
</html>
Enter fullscreen mode Exit fullscreen mode

Added a relative URL in the anchor tag that points to the index.html page

If you are inside a deeply nested folder structure, we might have to go multiple levels up. So,

<a href="../../../index.html">Home Page</a>
Enter fullscreen mode Exit fullscreen mode

With this, we can go three levels up.

As you can see, URLs like this kind of look messy. They look hard to read. In those cases, we can use an absolute URL.

So, we start with a / and this represents the root of our website.

<a href="/"></a>
Enter fullscreen mode Exit fullscreen mode

At this level, we have access to index.html.

<a href="/index.html"></a>
Enter fullscreen mode Exit fullscreen mode

So, this is an absolute URL.

Now, back to index.html:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE-edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="keywords" content="HTML, CSS" />
        <meta name="description" content="This is a simple HTML and CSS project" />
        <title>Document</title>
    </head>
    <body>
        <a href="company/about.html">About Me</a>
    </body>
</html>
Enter fullscreen mode Exit fullscreen mode

The anchor tag in index.html that points to the about.html page on VS Code

Here we are linking to an HTML document. But we can also link to non-HTML documents like images, PDFs, PowerPoints, and so on.

So, lets add a link to my image.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE-edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="keywords" content="HTML, CSS" />
        <meta name="description" content="This is a simple HTML and CSS project" />
        <title>Document</title>
    </head>
    <body>
        <a href="company/about.html">About Me</a>
        <a href="Images/altumcode.jpg">My Computer Photo</a>
    </body>
</html>
Enter fullscreen mode Exit fullscreen mode

Added a link to my image on VS Code

Take a look.

The links on the browser page

So, here is our second link. We can click it.

Clicking the link, My Computer Photo, that takes us to a new page with the photo on a browser

My image is displayed in the browser.

But, what if I want to prompt the user to download it? That is very easy. We are going to add the download attribute to our anchor element.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE-edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="keywords" content="HTML, CSS" />
        <meta name="description" content="This is a simple HTML and CSS project" />
        <title>Document</title>
    </head>
    <body>
        <a href="company/about.html">About Me</a>
        <a href="Images/altumcode.jpg" download>My Computer Photo</a>
    </body>
</html>
Enter fullscreen mode Exit fullscreen mode

Added the download attribute in the anchor tag of our image on VS Code

Remember to save it.

Now, back to the browser. We go back and refresh the page. (We have to manually refresh the page because the live server only refreshes the current page).

The browser page with our links

Now when I click this link, instead of seeing my image I am going to see my image getting downloaded.

The image downloaded on the browser

We can also link to other parts of this page.

So, let's create two sections with a lot of text. I am going to add an H2 element HTML:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE-edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="keywords" content="HTML, CSS" />
        <meta name="description" content="This is a simple HTML and CSS project" />
        <title>Document</title>
    </head>
    <body>
        <a href="company/about.html">About Me</a>
        <a href="Images/altumcode.jpg">My Computer Photo</a>
        <h2>HTML</h2>
    </body>
</html>
Enter fullscreen mode Exit fullscreen mode

Added the heading two element with the text HTML on VS Code

Below that, we are going to add some dummy text with 200 words.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE-edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="keywords" content="HTML, CSS" />
        <meta name="description" content="This is a simple HTML and CSS project" />
        <title>Document</title>
    </head>
    <body>
        <a href="company/about.html">About Me</a>
        <a href="Images/altumcode.jpg">My Computer Photo</a>
        <h2>HTML</h2>
        <p>Lorem, ipsum, sit amet consetieu millpiscing ellit, Qiaus nesciant dietns quisquet ael, doule, eit maigures</p>
    </body>
</html>
Enter fullscreen mode Exit fullscreen mode

Added the paragraph element with some dummy text on VS Code

Right after that, we are going to add another H2 for the CSS section with some more text.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE-edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="keywords" content="HTML, CSS" />
        <meta name="description" content="This is a simple HTML and CSS project" />
        <title>Document</title>
    </head>
    <body>
        <a href="company/about.html">About Me</a>
        <a href="Images/altumcode.jpg">My Computer Photo</a>
        <h2>HTML</h2>
        <p>Lorem, ipsum, sit amet consetieu millpiscing ellit, Qiaus nesciant dietns quisquet ael, doule, eit maigures</p>
        <h2>CSS</h2>
        <p>Lorem, ipsum, sit amet consetieu millpiscing ellit, Qiaus nesciant dietns quisquet ael, doule, eit maigures</p>
    </body>
</html>
Enter fullscreen mode Exit fullscreen mode

Added the CSS heading and paragraph with some dummy text on VS Code

Let's save the changes.

Take a look.

The browser page with the dummy text

On the top, we can add a link to the CSS section so that we don't have to scroll. When the user clicks on that, they will immediately jump to the CSS section.

So, here at the CSS section, first we are going to give this element a unique identifier. Just like everyone in the real world can have a unique identifier like a driver's license or a passport, every element on a page can also have a unique identifier.

Here, I am going to set the id attribute to section-css

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE-edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="keywords" content="HTML, CSS" />
        <meta name="description" content="This is a simple HTML and CSS project" />
        <title>Document</title>
    </head>
    <body>
        <a href="company/about.html">About Me</a>
        <a href="Images/altumcode.jpg">My Computer Photo</a>
        <h2>HTML</h2>
        <p>Lorem, ipsum, sit amet consetieu millpiscing ellit, Qiaus nesciant dietns quisquet ael, doule, eit maigures</p>
        <h2 id="section-css">CSS</h2>
        <p>Lorem, ipsum, sit amet consetieu millpiscing ellit, Qiaus nesciant dietns quisquet ael, doule, eit maigures</p>
    </body>
</html>
Enter fullscreen mode Exit fullscreen mode

Setting the id attribute to section-css in VS Code

The name doesn't really matter here. What matters is that we are defining what we call a fragment or a place on this page. Now, we are going to add a link to this fragment. So, on the top:

<a href="#section-css">CSS</a>
Enter fullscreen mode Exit fullscreen mode

This is how it looks on VS Code:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE-edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="keywords" content="HTML, CSS" />
        <meta name="description" content="This is a simple HTML and CSS project" />
        <title>Document</title>
    </head>
    <body>
        <a href="company/about.html">About Me</a>
        <a href="Images/altumcode.jpg">My Computer Photo</a>
        <a href="#section-css">CSS</a>
        <h2>HTML</h2>
        <p>Lorem, ipsum, sit amet consetieu millpiscing ellit, Qiaus nesciant dietns quisquet ael, doule, eit maigures</p>
        <h2 id="section-css">CSS</h2>
        <p>Lorem, ipsum, sit amet consetieu millpiscing ellit, Qiaus nesciant dietns quisquet ael, doule, eit maigures</p>
    </body>
</html>
Enter fullscreen mode Exit fullscreen mode

Added a link to the CSS Section on VS Code

Now, back to the browser.

The CSS link on the browser page

When I click on the CSS link, it takes me to the CSS section without scrolling.

The CSS section on the browser page

Now, a lot of websites like this have a link that helps you jump to the top of the page. Let's see how we can create that.

After the CSS section, I am going to add another anchor element.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE-edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="keywords" content="HTML, CSS" />
        <meta name="description" content="This is a simple HTML and CSS project" />
        <title>Document</title>
    </head>
    <body>
        <a href="company/about.html">About Me</a>
        <a href="Images/altumcode.jpg">My Computer Photo</a>
        <a href="#section-css">CSS</a>
        <h2>HTML</h2>
        <p>Lorem, ipsum, sit amet consetieu millpiscing ellit, Qiaus nesciant dietns quisquet ael, doule, eit maigures</p>
        <h2 id="section-css">CSS</h2>
        <p>Lorem, ipsum, sit amet consetieu millpiscing ellit, Qiaus nesciant dietns quisquet ael, doule, eit maigures</p>
        <a href="#"></a>
    </body>
</html>
Enter fullscreen mode Exit fullscreen mode

An empty anchor element on VS Code

For the href I am going to use an empty fragment. So, we just type a pound sign without an identifier.

<a href="#">Jump to Top</a>
Enter fullscreen mode Exit fullscreen mode

This is how it looks on VS Code:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE-edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="keywords" content="HTML, CSS" />
        <meta name="description" content="This is a simple HTML and CSS project" />
        <title>Document</title>
    </head>
    <body>
        <a href="company/about.html">About Me</a>
        <a href="Images/altumcode.jpg">My Computer Photo</a>
        <a href="#section-css">CSS</a>
        <h2>HTML</h2>
        <p>Lorem, ipsum, sit amet consetieu millpiscing ellit, Qiaus nesciant dietns quisquet ael, doule, eit maigures</p>
        <h2 id="section-css">CSS</h2>
        <p>Lorem, ipsum, sit amet consetieu millpiscing ellit, Qiaus nesciant dietns quisquet ael, doule, eit maigures</p>
        <a href="#">Jump to Top</a>
    </body>
</html>
Enter fullscreen mode Exit fullscreen mode

Added the text Jump to Top on the anchor element on VS Code

Let's take a look.

The Jump to Top link on the browser pag

Here is our link. When you click on it, it takes you to the top.

Now, let's see how we can link to external websites.

So, let's add another anchor element to link to Google.

Here, we have to use an absolute URL since Google is an external website. We are going to another website. So, how can we do that? Well, we have to start with a protocol.

<a href="https://google.com">Google</a>
Enter fullscreen mode Exit fullscreen mode

This is how it looks on VS Code:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE-edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="keywords" content="HTML, CSS" />
        <meta name="description" content="This is a simple HTML and CSS project" />
        <title>Document</title>
    </head>
    <body>
        <a href="company/about.html">About Me</a>
        <a href="Images/altumcode.jpg">My Computer Photo</a>
        <a href="#section-css">CSS</a>
        <a href="https://google.com">Google</a>
        <h2>HTML</h2>
        <p>Lorem, ipsum, sit amet consetieu millpiscing ellit, Qiaus nesciant dietns quisquet ael, doule, eit maigures</p>
        <h2 id="section-css">CSS</h2>
        <p>Lorem, ipsum, sit amet consetieu millpiscing ellit, Qiaus nesciant dietns quisquet ael, doule, eit maigures</p>
        <a href="#">Jump to Top</a>
    </body>
</html>
Enter fullscreen mode Exit fullscreen mode

A link to Google home page on VS Code

Let's take a look.

The Google link on the browser page

When we click the link Google, it takes us to Google.

The Google Home Page

Now, sometimes when linking to external websites, we want that link to open in a new tab. Let me show you how to do that.

<a href="https://google.com" target="_blank">Google</a>
Enter fullscreen mode Exit fullscreen mode

Here is how it looks on VS Code.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE-edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="keywords" content="HTML, CSS" />
        <meta name="description" content="This is a simple HTML and CSS project" />
        <title>Document</title>
    </head>
    <body>
        <a href="company/about.html">About Me</a>
        <a href="Images/altumcode.jpg">My Computer Photo</a>
        <a href="#section-css">CSS</a>
        <a href="https://google.com" target="_blank">Google</a>
        <h2>HTML</h2>
        <p>Lorem, ipsum, sit amet consetieu millpiscing ellit, Qiaus nesciant dietns quisquet ael, doule, eit maigures</p>
        <h2 id="section-css">CSS</h2>
        <p>Lorem, ipsum, sit amet consetieu millpiscing ellit, Qiaus nesciant dietns quisquet ael, doule, eit maigures</p>
        <a href="#">Jump to Top</a>
    </body>
</html>
Enter fullscreen mode Exit fullscreen mode

Added target blank to the anchor tag of Google on VS Code

Now, back to the home page.

The index.html page on the browser

Once again, we have to manually refresh to get the latest changes.

Now, when I click on Google, we see a new tab.

A new browser tab when I click the Google link

This is all about links.

Now, one main difference before we finish this lesson. What is the difference between a link and a hyperlink?

Well, a link is just an address, a URL, a location of the target page.

A hyperlink is the element that the user can click on to navigate to that target page. That is the difference between a link and a hyperlink. But, quite often, this terms are used interchangeably.

Happy Coding!

Top comments (0)

Read next

servbay profile image

Laravel 11 with Servbay: Quick Start Guide

ServBay -

whitep4nth3r profile image

Why don’t we talk about minifying CSS anymore?

Salma Alam-Naylor -

shilleh profile image

How to Connect MPU9250 and Raspberry Pi (Part 2 - Calibration)

Shilleh -

facubotta profile image

Meta Data in React

Facundo Botta -