Links in HTML (Complete Guide)
In this tutorial, you will see what are links, and how to add links in HTML. Whether it’s a simple HTML link, an image link, an internal link, or an external link we’ll see all of them in this tutorial.
While searching the internet you have seen links many times. For example, I took a screenshot of an HTML webpage that contains some HTML links, and these are in blue color. You can use any color but the following image example shows links in blue.
So, what’s going on behind the scenes? How to add these links in HTML? What are these and how do they work? That’s what we’re going to see next.
What are Links in HTML?
In simple words, an HTML link is a connection from one web resource to another. The web resource can be anything, like a video, an image, a webpage, or any website, even a Facebook page.
The basic purpose of a link is to take users from one place to another on the internet.
For example, you want the person on your website should go to your YouTube channel after clicking on a specific link. Behind the link, you will provide the location of a link in the form of a URL so that the person can go to your YouTube channel after clicking.
And these links work so quickly, that’s why we call them hyperlinks in HTML.
It connects one webpage to another. 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.
Basic Syntax of a Link in HTML
A link consists of a pair of <a> tags also known as anchor tags. Everything that goes inside these tags will work as a link.
<a href="https://www.example.com/"> Link Name </a>
Inside the opening <a> tag, we have an href attribute that we use to specify the location of a hyperlink in the form of a URL.
Note: Specifying the location of a link using href an attribute is crucial otherwise the link will not work.
If you don’t know anything about HTML attributes and tags. Then, check out this complete guide about HTML Tags vs Elements vs Attributes.
Let’s see the real examples in the next step.
How to Add Links in HTML
Adding links in HTML is very straightforward. Just open the HTML file in your code editor and put the link using the anchor tags as shown in the example below.
<!-- Links in HTML paragraph --> <p> Lorem ipsum dolor sit amet <a href="https://www.facebook.com"> facebook </a> adipisicing elit. Nisi, maxime? Ea a dignissimos odio veritatis debitis quasi voluptates iusto <a href="https://www.twitter.com"> Twitter </a> autem sequi. Illo ullam a eligendi necessitatibus officia iste possimus porro? </p>
The code example above shows two links in a paragraph. One link will take the user to Facebook and one to Twitter. The text I used for a paragraph is a demo text.
You can convert anything into a link by just putting anchor tags around it. A link can be a heading, paragraph, image as a link, or list item.
The Target Attribute
In reality, you did see that sometimes you click a link that opens up in a new tab of your browser. And some links are normally open up in the existing tabs. That happens because of the HTML’s target attribute.
The target attribute specifies whether the HTML link should open in a new tab or an existing tab of the browser. It has two most common values.
- _blank
- _self
Let’s see them with code examples.
_blank
<a href="https://www.facebook.com" target="_blank"> facebook </a>
The above code will make the HTML links open in a new tab.
Tip: Using target="_blank" is a better choice for all the external links in HTML.
_self
It’s not crucial to specify _self for the target attribute. Because by default, all links in HTML are open in an existing tab. However, the following code shows how to use it.
<a href="https://www.facebook.com" target="_self"> facebook </a>
Different Types of Links in HTML
There are two different types of links in HTML.
- Internal Links
- External Links
These are extremely important from an SEO perspective. Let’s understand them.
Internal Links in HTML
It is basically any link on your webpage that is pointing to another webpage that is located on the same website.
To identify the internal links you need to look at the root domain name. If it is the same name that a website has then this will be an internal link.
For example, our website’s root domain name is webcodzing.com. So, all the links on our website that have the same root domain name are internal links. The following example shows two internal links.
<a href="https://www.webcodzing.com/html-images/"> HTML Images </a> <a href="https://www.webcodzing.com/html-tags/"> HTML Tags </a>
External Links in HTML
It is a type of link that is pointing to another webpage but that webpage is located on another website.
To identify external links, just look at the root domain if it is different then it is an external link.
<a href="https://www.facebook.com/page1/"> Facebook </a> <a href="https://www.twitter.com/page2/"> Twitter </a>
Images 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, just wrap up the <img> tag with anchor tags as shown in the code example below.
The following example will make the image as a link and on click, it will take you to the site.
<a href="https://www.webcodzing.com"> <img src="image/logo.png"> </a>
Explanation:
I used the <img> tag inside the anchor tags. Inside the <img> tag, we use the source ‘src’ attribute to specify the location of the image. Then, as usual, I create a link.
That’s it, Now, you know enough about links in HTML. If you have any questions related to this tutorial then feel free to ask any questions in the comments section below.
Topic: HTML
