How to Make Hyperlinks Using HTML

Introduction

Hyperlinks are one of the most important parts of the web. They let users move from one page to another, open documents, visit external websites, send emails, or jump to a different part of the same page.

In HTML, hyperlinks are created using the <a> element. The letter “a” stands for “anchor”.

The Basic HTML Link

A simple hyperlink looks like this:

1<a href=”https://www.example.com”>Visit Example</a>

This creates a clickable link that says:

Visit Example

The href attribute tells the browser where the link should go. The text between the opening <a> tag and the closing </a> tag is the clickable text the user sees.

Understanding the Parts of a Link

Here is the same example again:

1<a href=”https://www.example.com”>Visit Example</a>

It has three main parts:

1<a>

This opens the anchor element.

1href=”https://www.example.com”

This tells the browser the destination of the link.

1Visit Example

This is the visible link text.

1</a>

This closes the anchor element.

Linking to Another Website

To link to another website, use the full web address, including https://.

1<a href=”https://www.google.com”>Go to Google</a>

This is called an external link because it goes to a different website.

Linking to Another Page on Your Own Website

You can also link to another page in the same website.

For example, if you have a page called about.html, you can link to it like this:

1<a href=”about.html”>About Us</a>

If the page is inside a folder, include the folder name:

1<a href=”pages/contact.html”>Contact Us</a>

This type of link is called an internal link.

Opening a Link in a New Tab

Sometimes you may want a link to open in a new browser tab. To do this, add target="_blank".

1<a href=”https://www.example.com” target=”_blank”>Open Example in a New Tab</a>

When using target="_blank", it is good practice to also add rel="noopener noreferrer" for security and privacy reasons.

1<a href=”https://www.example.com” target=”_blank” rel=”noopener noreferrer”>2  Open Example in a New Tab3</a>

Creating an Email Link

You can make a link that opens the user’s email app by using mailto:.

1<a href=”mailto:[email protected]”>Email Us</a>

When the user clicks the link, their email program will open with the email address already filled in.

You can also add a subject line:

1<a href=”mailto:[email protected]?subject=Website enquiry”>Email Us</a>

Creating a Phone Link

On mobile devices, you can create a link that lets users call a phone number.

1<a href=”tel:+441234567890″>Call Us</a>

This is useful for business websites, contact pages, and mobile-friendly designs.

Linking to a Section on the Same Page

You can create a link that jumps to a specific section of the same page.

First, give the target section an id:

1<h2 id=”contact”>Contact Information</h2>

Then create a link to that section using # followed by the ID name:

1<a href=”#contact”>Go to Contact Information</a>

When clicked, the browser will jump to the section with the matching id.

Linking to a File

You can also link to files, such as PDFs, images, or documents.

1<a href=”files/guide.pdf”>Download the Guide</a>

Depending on the browser and file type, the file may open in the browser or download to the user’s device.

Using Clear Link Text

Good link text should explain where the link goes. Avoid vague phrases like:

1<a href=”about.html”>Click here</a>

A better version would be:

1<a href=”about.html”>Learn more about our company</a>

Clear link text is better for accessibility, search engines, and user experience.

Adding a Title Attribute

You can add a title attribute to give extra information about a link.

1<a href=”services.html” title=”View our full list of services”>Our Services</a>

When some users hover over the link, the title text may appear as a small tooltip. However, do not rely on the title attribute for important information because it is not always accessible on mobile devices or screen readers.

Styling Links with CSS

By default, links are usually blue and underlined. You can change their appearance with CSS.

1<a href=”about.html” class=”button-link”>About Us</a>

1.button-link {2  color: white;3  background-color: blue;4  padding: 10px 15px;5  text-decoration: none;6  border-radius: 5px;7}

This can make a link look more like a button.

You can also style links when the user hovers over them:

1.button-link:hover {2  background-color: darkblue;3}

A Complete Example

Here is a simple HTML page with different types of links:

1<!DOCTYPE html>2<html lang=”en”>3<head>4  <meta charset=”UTF-8″>5  <title>HTML Links Example</title>6</head>7<body>8 9  <h1>HTML Hyperlinks</h1>10 11  <p>12    <a href=”https://www.example.com”>Visit Example</a>13  </p>14 15  <p>16    <a href=”about.html”>About Us</a>17  </p>18 19  <p>20    <a href=”mailto:[email protected]”>Email Us</a>21  </p>22 23  <p>24    <a href=”#contact”>Jump to Contact Section</a>25  </p>26 27  <h2 id=”contact”>Contact Section</h2>28  <p>This is the contact section of the page.</p>29 30</body>31</html>

Common Mistakes to Avoid

One common mistake is forgetting to include the href attribute.

Incorrect:

1<a>Visit our page</a>

Correct:

1<a href=”page.html”>Visit our page</a>

Another common mistake is forgetting the closing </a> tag.

Incorrect:

1<a href=”about.html”>About Us

Correct:

1<a href=”about.html”>About Us</a>

You should also avoid using unclear link text such as “click here” or “read more” when more descriptive text would be better.

Summary

Hyperlinks are made in HTML using the <a> element. The most important attribute is href, which tells the browser where the link should go.

The basic pattern is:

1<a href=”destination”>Link text</a>

You can use hyperlinks to link to websites, pages, files, email addresses, phone numbers, and sections within the same page.

Once you understand the <a> element, you have learned one of the core building blocks of the web.