This tutorial will teach you how to add or create links in HTML. In this tutorial, you are going to learn a lot about HTML hyperlinks.
So, let’s get started.
Table of Content
- What is a Link in HTML?
- HTML Links Syntax
- How to Add Links in HTML?
- HTML Link Target Attribute
- How to Add Image as HTML Link
What is a Link in HTML?
In simple words, a link is the location of a digital web resource. The resource might be a simple webpage, an image, a video, any website, or any digital content that lives on the internet. It connects one webpage to another webpage.
When you click on an HTML link, you quickly jump on another webpage. The basic purpose of a link is to take us from one place to another place on the internet. Because these links work so quickly and actively, that’s why we call them hyperlinks in HTML terms.
Aa a minute ago, you just clicked on a link and jumped on this page to read this tutorial. That was a link too. And, the internet is full of these links.
HTML Links Syntax
The syntax of the HTML link is very simple and easy. For creating links in HTML, we use pair of
<a> tags. In HTML, we call this the anchor tag. Inside
<a> tags, we give our link a name. And the link’s address goes inside the double quotes of
href attributes as shown below.
<a href="https://www.example.com/"> Link Name </a>
Always remember that you must have to provide the location of the link inside
href the attribute as shown above. Otherwise, you will not go anywhere but the link will still be clickable. As you know, when we hover on a link then our mouse arrow automatically changes to a little hand. That is the sign of a link.
href attribute is so important. Because without
href you can’t specify the location of a link.
Tip: If you don’t know anything about HTML attributes and tags. Then, check out this complete guide about HTML Tags vs Elements vs Attributes.
Now you know the syntax it’s time to add a link to the HTML webpage.
How to Add Links in HTML
Adding links to an HTML webpage is very easy. I hope you have already opened the HTML file in your text editor. So, where you want to add your link is the important thing. Maybe you want to add a link in your navbar menu, link in a paragraph, link in the sidebar, or link in the footer.
So, wherever you want to add hyperlinks in HTML, you can do it using the same syntax that I have told you above. Let’s see a real-life example.
Let’s suppose, I want to create a navbar on my site. And I want to add 4 links to my site’s navbar. So, How do I do it? Just see lines no. 16, 17, 18, 19 in the code below.
<!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"> <title>WikiCourses - Learn Web Development</title> </head> <body> <!--Navbar start--> <div class="navbar"> <div class="logo"> <h3>WikiCourses</h3> </div> <div class="primary-menu"> <a href="https://www.sitename.com/home">Home</a> <a href="https://www.sitename.com/courses">Courses</a> <a href="https://www.sitename.com/about">About</a> <a href="https://www.sitename.com/contact">Contact</a> </div> </div> <!--navbar end--> </body> </html>
Hopefully, you have understood how to add links to the HTML webpage. Now, let’s see the important part about links.
HTML Link Target Attribute
In real life, you have seen it many times when you click a link in your browser. Then, some links open in a new tab, and some links open in the existing tab in your browser. That happens because of the HTML’s target attribute. Let’s see how to use it.
HTML Link Open in a New Tab
If you want the HTML link to be open in a new tab of your browser. Then, you have to use the target attribute with _blank value inside the opening
<a> tag. As shown in the code below.
<a href="https://www.example.com/courses" target="_blank"> Link Name </a>
HTML Link in Existing Tab
It’s not so important because by default HTML links open in the existing tab. But if you want to specify it in the target attribute. Then, use _self inside target attribute as shown below.
<a href="https://www.example.com/courses" target="_self"> Link Name </a>
How to Add Image as Links in HTML
Sometimes, we see that an image on the internet is working as a link. And how is that? This is very simple. Let me show you the code.
<a href="https://www.webcodzing.com"> <img src="image/logo.png"> </a>
As you can see in the code example above, I used the
<img> tag inside the anchor tags. Inside <img> tag, we use the source ‘src’ attribute to specify the location of the image. Then, as usual, I create a link.
Now, the image above will work as a link and will take the user to the homepage according to the address.
That’s it, I hope you understood well what are links and how to use them in HTML. If you have any questions related to this guide then feel free to ask any questions in the comments section below.