HTML Links

 

HTML Links: Connecting Web Pages – A Beginner’s Guide to Creating Links in HTML

Have you ever clicked on a piece of text and been taken to another webpage? That simple action is possible because of HTML links. Links are one of the most important parts of the web because they connect pages, websites, documents, images, and resources together.

In this beginner-friendly guide, you'll learn what HTML links are, why they are important, and how to create different types of links using HTML.

What Are HTML Links?

HTML links, also known as hyperlinks, allow users to navigate from one webpage to another.

Without links, the internet would simply be a collection of isolated pages. Links create connections between web pages and make browsing possible.

For example:

• Moving from your homepage to an About page
• Opening another website
• Downloading a file
• Sending an email
• Jumping to a specific section of a webpage

The HTML <a> Tag

Links in HTML are created using the anchor tag (<a>).

Syntax

<a href="URL">Link Text</a>

Example

<a href="https://www.google.com">Visit Google</a>

Output

Visit Google

In this example:

• <a> creates the link.
• href specifies the destination.
• The text between the opening and closing tags is what users click.

Understanding the href Attribute

The href attribute stands for Hypertext Reference.

It tells the browser where the link should go.

Example

<a href="https://www.emenesstechacademy.com">
Visit Our Website
</a>

When clicked, users will be redirected to the specified website.

Linking to Another Website

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

Example

<a href="https://www.wikipedia.org">
Visit Wikipedia
</a>

External links help users access additional information from other websites.

Linking to Another Page on Your Website

You can also connect pages within your own website.

Example

Suppose you have:

index.html
about.html
contact.html

From your homepage:

<a href="about.html">About Us</a>

This takes visitors to the About page.

Opening a Link in a New Tab

Sometimes you want a link to open in a new browser tab.

Use the target="_blank" attribute.

Example

<a href="https://www.youtube.com" target="_blank">
Visit YouTube
</a>

Now the link opens in a new tab instead of replacing the current page.

Adding Security to New Tab Links

When using target="_blank", it's recommended to add:

rel="noopener noreferrer"

Example

<a href="https://www.youtube.com"
target="_blank"
rel="noopener noreferrer">
Visit YouTube
</a>

This improves security and performance.

Creating an Email Link

HTML can open a user's email application automatically.

Example

<a href="mailto:info@example.com">
Send Us an Email
</a>

When clicked, the default email program opens.

Creating a Phone Link

Phone links are useful for mobile users.

Example

<a href="tel:+2348012345678">
Call Us
</a>

On smartphones, clicking this link starts a phone call.

Linking to a Specific Section on the Same Page

You can create links that jump to another part of the same webpage.

Step 1: Create the Link

<a href="#contact">Go to Contact Section</a>

Step 2: Add an ID to the Target Section

<h2 id="contact">Contact Us</h2>

When users click the link, the page scrolls directly to that section.

Using Images as Links

Images can also be clickable.

Example

<a href="https://www.google.com">
<img src="logo.jpg" alt="Google Logo">
</a>

Clicking the image redirects users to Google.

Creating Download Links

You can allow users to download files.

Example

<a href="ebook.pdf" download>
Download Free eBook
</a>

The browser will download the file instead of opening it.

Absolute vs Relative URLs

Understanding URLs is important when creating links.

Absolute URL

Contains the complete web address.

<a href="https://www.google.com">
Google
</a>

Used for:

• External websites
• Full web addresses

Relative URL

Contains only the file path.

<a href="about.html">
About Us
</a>

Used for:

• Internal website pages
• Easier website management

Styling Links with CSS

Links can be customized using CSS.

HTML

<a href="#">Click Here</a>

CSS

a {
    color: blue;
    text-decoration: none;
}

a:hover {
    color: red;
}

This removes the underline and changes the color when users hover over the link.

Common Link States

CSS allows you to style different link states.

a:link {
    color: blue;
}

a:visited {
    color: purple;
}

a:hover {
    color: red;
}

a:active {
    color: green;
}

Meaning:

State	Description
link	Unvisited link
visited	Previously visited
hover	Mouse over link
active	Being clicked

Best Practices for HTML Links

To create effective links:

✅ Use descriptive text

<a href="guide.html">
Read Our HTML Guide
</a>

Instead of:

<a href="guide.html">
Click Here
</a>

✅ Test all links regularly

✅ Use meaningful anchor text

✅ Open external links in new tabs when appropriate

✅ Keep navigation simple and user-friendly

Common Mistakes Beginners Make

Missing href

Incorrect:

<a>Home</a>

Correct:

<a href="index.html">Home</a>

Wrong File Name

Incorrect:

<a href="abut.html">About</a>

Correct:

<a href="about.html">About</a>

Unclosed Tag

Incorrect:

<a href="about.html">About

Correct:

<a href="about.html">About</a>

Why HTML Links Are Important

Links are the foundation of the internet. They:

• Connect webpages
• Improve website navigation
• Help users find information quickly
• Improve user experience
• Support SEO by connecting related content
• Make websites interactive and useful

Without links, websites would be difficult to navigate and much less effective.

Conclusion

HTML links are one of the most essential elements in web development. By using the <a> tag and the href attribute, you can connect pages, websites, documents, email addresses, and specific sections of a webpage.

As you continue learning HTML, mastering links will help you create professional websites that are easy to navigate and user-friendly. Practice creating different types of links and experiment with their features to become more confident in web development.