How to add a link in HTML

To add a link in HTML, take an anchor tag <a> and insert the path into the “href” attribute. See the linking pattern below.

<!-- Example 1 -->
<a href="https://example.com/about">Anchor text</a>

<!-- Example 2 -->
<a href="index.html"><img src="image.jpg" alt="an image"></a>

<!-- Example 3 -->
<a href="http://example.com"><h2>This is a clickable heading</h2></a>
<h2><a href="http://example.com">This is a clickable heading</a></h2>

<!-- Example 4 -->
<p>Lorem dolor amet <a href="about.html">consectetur</a> elit.</p>

<!-- Example 5 -->
<a href="http://example.com/learn-more/" target="_blank">Learn more</a>

<!-- Example 6 -->
<a href="example-file.pdf" download>Download file</a>

<!-- Example 7 -->
<a href="mailto:[email protected]">Email Me</a>

In the above code, you see that I have 7 different linking examples. You will see all sorts of HTML linking methods step by step. Also, you’ll learn some new things about HTML links that you may have not seen before.

Example 1

In the above example, you see how to create a link in HTML. The clickable text is known as anchor text as you see in “Example 1.”

Example 2

In “Example 2“, you see that we can also make an image clickable. In this case, you have to wrap the <img> tag within the anchor tag (<a>).

Example 3

“Example 3” shows you how we can make a heading clickable. You can also make a part of it (heading) clickable. For example:

<h2>This is a <a href="http://example.com">clickable</a> heading</h2>

Also, “Example 3” contains two links that are exactly the same and both are correct. However, the second one is semantically correct.

And it could be any level of heading such as h1, h2, h3…h6.

Example 4

In “Example 4“, you see how to make a certain word(s) a link within a paragraph.

Example 5

You see an additional attribute called “target” in “Example 5.” This target attribute has a couple of properties. In this example, I have “_blank” as the value. It simply means that it will open the link in a new tab.

To learn more about this target attribute, browser compatibility, and best practice for using it, see how to open a link in a new tab.

Example 6

In “Example 6“, you see another new attribute called “download.” This attribute tells the web browsers to download the file on the user’s device instead of opening it. For example, if you click the link below, it will start downloading a pdf file on your computer/mobile (it includes Google search technics).

Download file

To learn more about making a download link, see how to create a download link in HTML.

Example 7: How to create an HTML link that redirects to the default email provider?

I am pretty sure that you see this example many times. This generally can be found on the footer of many websites that say email us or email me or something similar.

The interesting thing is if you click the link, it will redirect you to your default email provider such as Gmail, Microsoft 360, Yahoo, etc. And at the same time, it will prepopulate the “To” field. See this in action below.

Email Me

And this is what you see in “Example 7.” There are other ways to tweak the email link. For example, you can prepopulate other fields such as subject, body, etc. To learn more about it, see how to create an HTML mailto link.

What is href in the link (anchor) tag?

You see that the beginning <a> tag contains a certain text “href.” This “href” is an attribute. Its full meaning is “Hypertext REFerence.”

And this link can be an absolute path or a relative path.

Examples of the absolute path:

https://example.com

https://example.com/about

Examples of the relative path:

index.html

/about/our-mission.html

/assets/images/cat.png

How to make a button link to another page?

To make a button link that redirects to another page, wrap the button within the anchor tag and insert the hyperlink as the “href” value.

There are a couple of ways to do it. To learn more, see how to create a button that acts like a link.

Learn more about HTML links

Conclusion

Now you know how to add a link in HTML. Also, you got lots of real-world examples. If you have any questions, please feel free to ask. And let me know if you found what you were looking for.