How to Create Hyperlinks(in HTML)
Tags: html, webdev, beginners, programming
Published: 2023-10-09 09:09:14

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

```html
<a href=""></a>
```

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

```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>
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8njnl76n1gwafw04bure.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/00iv8424ptto3rkl0lsl.png)

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

![Empty about.html in VS Code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5bngb809rckq3d0mlcrr.png 'Empty about.html in VS Code')

Now, let's create it.

```html
<!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>
```

![HTML Boilerplate in about.html on VS Code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hqtijb74vskv4nbuqdtt.png 'HTML Boilerplate in about.html on VS Code')

Back to `index.html`:

```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>
```

![The index.html code on VS Code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v74occzaajtb70g49r0d.png '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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hxz3t3anxvlev86111w8.png '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.

```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="about.html"></a>
    </body>
</html>
```

![Added the absolute URL about.html](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1blw9d33kc7hvshjrm9m.png '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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zp1tn3ahaj7ipcuzj05v.png '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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z0by5n8s9ni6uf287g18.png '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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/70xy65j8ytqi79t6x0uj.png 'The about.html is now inside the company folder')

So, here we type `company/about.html`:

```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>
```

![Typing company/about.html in the href on VS Code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jnejz4vsn212q57e99jy.png 'Typing company/about.html in the href on VS Code')

This is a relative URL.

For the Full eBook, [get it here](https://karlgusta.gumroad.com/l/edtbb)

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.

```html
<a href="company/about.html">About Me</a>
```

This is how it looks on VS Code:

```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>
```

![company/about.html in the href on the anchor tag of About Me on VS Code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c9tpevyvjxxukhkgmpue.png '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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/htti0k6t2z6w2lzpgdg8.png '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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ksll638l367x9xbulxv9.png '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`:

```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>
```

![Deleted the About Me text in the anchor tags on VS Code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nwsk501w9qw9oilntxvc.png 'Deleted the About Me text in the anchor tags on VS Code')

and add an image element instead:

```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">
            <img src="" alt="">
        </a>
    </body>
</html>
```

![Added an image element inside the anchor tags in VS Code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vybsmagwd21vxi752991.png 'Added an image element inside the anchor tags in VS Code')

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

```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">
            <img src="Images/altumcode.jpg" alt="">
        </a>
    </body>
</html>
```

![A relative URL to our target image on VS Code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mx06753xxeqlgk4axmve.png 'A relative URL to our target image on VS Code')

Here is how it looks:

![The image on the browser page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z1o02mc9wug8zdxwigw6.png '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.

```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>
```

![Removed the image and added our text back on the anchor tag in VS Code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/klofyaroauhfkd0in31a.png '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:

```html
<!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>
```

![HTML boilerplate on the about.html page on VS Code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j5cme24rtn6oenvj7rb9.png 'HTML boilerplate on the about.html page on VS Code')

We are going to add an anchor element:

```html
<!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>
```

![Added an anchor tag in the body on VS Code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0ue2w1hlo9914rto4czj.png '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.

```html
<a href="../"></a>
```

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

```html
<a href="../index.html">Home Page</a>
```

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

```html
<!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>
```

![Added a relative URL in the anchor tag that points to the index.html page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0n9v8zeqp2c6v7ljse19.png '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,

```html
<a href="../../../index.html">Home Page</a>
```

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.

```html
<a href="/"></a>
```

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

```html
<a href="/index.html"></a>
```

So, this is an absolute URL.

Now, back to `index.html`:

```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>
```

![The anchor tag in index.html that points to the about.html page on VS Code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ozh1b5kvwvlw3sa6nsmf.png '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.

```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>
    </body>
</html>
```

![Added a link to my image on VS Code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aodigtuwr2mbjia1r4jf.png 'Added a link to my image on VS Code')

Take a look.

![The links on the browser page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4ro9arbi3h91u7w0elty.png '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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h4enj7936emdm3z7s9u1.png '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.

```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" download>My Computer Photo</a>
    </body>
</html>
```

![Added the download attribute in the anchor tag of our image on VS Code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c4prmvax6rd3go61aw9z.png '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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h5g95lbe8p4ug57dufv4.png '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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wmaniuflamcx22bozefn.png '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`:

```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>
```

![Added the heading two element with the text HTML on VS Code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lnvaiky14vp9d0kctc2i.png '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.

```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>
        <p>Lorem, ipsum, sit amet consetieu millpiscing ellit, Qiaus nesciant dietns quisquet ael, doule, eit maigures</p>
    </body>
</html>
```

![Added the paragraph element with some dummy text on VS Code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u539754gueqcq5vho8iq.png '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.

```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>
        <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>
```

![Added the CSS heading and paragraph with some dummy text on VS Code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e2656b58isnpzltvboa8.png '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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gkt2oc7awl6czutgwzn3.png '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`

```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>
        <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>
```

![Setting the id attribute to section-css in VS Code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3nht3wnrumlpose8bs46.png '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:

```html
<a href="#section-css">CSS</a>
```

This is how it looks on VS Code:

```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>
        <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>
```

![Added a link to the CSS Section on VS Code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sduz8h9wm5vf2w9gzvqa.png 'Added a link to the CSS Section on VS Code')

Now, back to the browser.

![The CSS link on the browser page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mls6g6shceo39mn9x5da.png '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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/61a9ckik75bfoaoduhhn.png '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.

```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>
        <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>
```

![An empty anchor element on VS Code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/48eq9mtftopi8xg5kmvu.png '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.

```html
<a href="#">Jump to Top</a>
```

This is how it looks on VS Code:

```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>
        <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>
```

![Added the text Jump to Top on the anchor element on VS Code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hrl6o1kclcurl0jh382v.png '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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/78lufmn7rvv2lrz7lewd.png '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.

```html
<a href="https://google.com">Google</a>
```

This is how it looks on VS Code:

```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>
        <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>
```

![A link to Google home page on VS Code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/devkc2m4zuwf6wjrce1c.png 'A link to Google home page on VS Code')

Let's take a look.

![The Google link on the browser page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kcl6n3j54yvvx76pyt39.png 'The Google link on the browser page')

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

![The Google Home Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yo9l00w4e3ktp83zbbtt.png '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.

```html
<a href="https://google.com" target="_blank">Google</a>
```

Here is how it looks on VS Code.

```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>
        <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>
```

![Added target blank to the anchor tag of Google on VS Code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t39r3u62mcw24h1igj9q.png '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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q5ghy5zinokfgok5yzlt.png '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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pbccjhhcfdaxdfk49ix2.png '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!