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>
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>
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
:
Here, we are going to create a basic HTML boilerplate.
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>
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>
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.
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>
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
:
We then move about to this folder by dragging-and-dropping.
Where is about.html
relative to this page? It is 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>
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>
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>
Back to the browser. Here is our link:
When you click it, it takes you to the about page which is empty.
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>
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>
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>
Here is how it looks:
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>
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>
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>
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>
We can then reference index.html
and for the text, we are going to say home page.
<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.
<!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>
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>
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>
At this level, we have access to index.html
.
<a href="/index.html"></a>
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>
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>
Take a look.
So, here is our second link. We can click it.
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>
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).
Now when I click this link, instead of seeing my image I am going to see my image getting downloaded.
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>
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>
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>
Let's save the changes.
Take a look.
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>
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>
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>
Now, back to the browser.
When I click on the CSS link, it takes me to the CSS section without scrolling.
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>
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>
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>
Let's take a look.
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>
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>
Let's take a look.
When we click the link Google, it takes us to Google.
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>
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>
Now, back to the home page.
Once again, we have to manually refresh to get the latest changes.
Now, when I click on Google, we see a new tab.
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!