Altcademy - a Forbes magazine logo Best Coding Bootcamp 2023

How to add a hyperlink in HTML

Before we dive into the technicalities of adding a hyperlink in HTML, let's take a moment to understand what a hyperlink is. Imagine you're reading a book and you come across a word or term you're not familiar with. You wish there was a way to instantly know more about it without having to look it up separately. Now, imagine if you could just touch that word and immediately be transported to a page that provides a detailed explanation. That's basically what a hyperlink does on a web page. It's a sort of portal or bridge that connects one part of the internet to another.

A hyperlink in HTML consists of three main parts: the opening tag, the clickable text, and the closing tag. The opening tag is <a href="">, the clickable text is whatever you want your viewers to see and click on, and the closing tag is </a>. The URL of the webpage you want to link to goes within the quotes in the opening tag.

Here's an example:

<a href="">Click here</a>

In this example, "Click here" is the clickable text that would appear on your webpage, and "" is the website that the user would be taken to when they click on the text.

While "Click here" is a common anchor text (the technical term for clickable text in a hyperlink), it's not always the most meaningful. For example, if you're writing a blog post about space exploration and you want to link to a page about the Mars Rover, it would be more helpful to make "Mars Rover" the anchor text:

<a href="">Mars Rover</a>

By doing this, you're providing your readers with a clear idea of what they can expect when they click on the link. It also helps with search engine optimization, but that's a topic for another day.

Aside from the URL and the anchor text, there's another element you can add to your hyperlink: the title attribute. This is an optional attribute that provides additional information about the link. It often appears as a tooltip when the cursor hovers over the link.

Here's how you can include a title in your hyperlink:

<a href="" title="Learn more about the Mars Rover">Mars Rover</a>

In this case, when a user hovers over the "Mars Rover" link, they would see "Learn more about the Mars Rover".

Sometimes, you might want your hyperlink to open in a new tab when clicked, keeping your webpage still open in the original tab. To achieve this, you need to add the target="_blank" attribute:

<a href="" target="_blank">Mars Rover</a>

Now, when someone clicks on this hyperlink, a new tab will open, navigating to the Mars Rover page, leaving your webpage still open in the previous tab.

You can also use hyperlinks to link to an email address. Instead of using "http://" or "https://" like with web page URLs, you use "mailto:". Here's how:

<a href="">Email me</a>

When someone clicks on this hyperlink, their email client will open a new draft email to "".

The Takeaway

Hyperlinks are a fundamental part of the internet. They connect webpages together, making it possible for us to navigate from one piece of content to another. By understanding the different elements of a hyperlink and how to use them in HTML, you're well on your way to creating more engaging and user-friendly webpages. Remember, the key is to make your hyperlinks meaningful, informative, and intuitive. Happy coding!