Home Blog Contact

Web Design Tutorial — Lesson 18 of 27 [ Updated: 11 Aug 2026 ]

HTML Links (<a>) Explained for Beginners – Complete Guide


Learning Objectives

After completing this tutorial, you will be able to:

  • Create clickable links using HTML.

  • Understand the <a> tag.

  • Use the href attribute.

  • Create internal and external links.

  • Link different pages of a website.

  • Understand how links are used in website navigation.

Table of Contents

  1. Introduction

  2. What Is an HTML Link?

  3. Creating Your First Link

  4. Understanding href

  5. Linking to Another Website

  6. Creating Internal Links

  7. Opening Links in a New Tab

  8. Email Links

  9. Best Practices

  10. Common Beginner Mistakes

  11. Practice Exercise

  12. Assignment

  13. Summary

  14. Frequently Asked Questions

  15. Next Tutorial

Introduction

A website would not be very useful if every page existed separately.

Websites need a way to connect pages together.

For example, a website might have:

Home
About
Services
Blog
Contact

When a visitor clicks About, they should be taken to the About page.

When they click Blog, they should be taken to the Blog section.

HTML provides the anchor element (<a>) to create these clickable connections.

Links are one of the most important parts of the web.

What Is an HTML Link?

An HTML link is created using the <a> element.

The basic syntax is:

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

For example:

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

The visitor sees:

Visit Google

When they click it, the browser opens the specified destination.

Creating Your First Link

Let's create a simple webpage.

<!DOCTYPE html>
<html>
<head>
    <title>My First Links</title>
</head>
<body>

<h1>My Website</h1>

<p>
    Visit my favorite website:
    <a href="https://www.google.com">Google</a>
</p>

</body>
</html>

Save the file and refresh your browser.

You should see Google as a clickable link.

Click it.

The browser will take you to Google's website.

You've just created your first functional HTML link.

Understanding href

The most important attribute of the <a> element is:

href

href stands for Hypertext Reference.

It tells the browser where the link should go.

Example:

<a href="https://example.com">Visit Example</a>

Here:

<a>              → Anchor element
href             → Attribute
"https://example.com" → Destination
Visit Example    → Clickable text

So the structure is:

<a href="destination">Clickable Text</a>

Linking to Another Website

You can link to any public webpage using its URL.

Example:

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

Another example:

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

The text between <a> and </a> becomes clickable.

You can also write a sentence:

<p>
    Learn more about web design on
    <a href="https://example.com">this website</a>.
</p>

This creates a natural inline link inside your paragraph.

Creating Internal Links

External links take visitors to another website.

Internal links connect pages within your own website.

Suppose your project looks like this:

my-website/
│
├── index.html
├── about.html
└── contact.html

From index.html, you can link to about.html like this:

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

And link to the contact page:

<a href="contact.html">Contact Us</a>

Now your pages are connected.

Building Simple Navigation

You can combine several links to create a basic navigation menu.

<nav>

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

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

<a href="services.html">Services</a>

<a href="contact.html">Contact</a>

</nav>

At this stage, the links will appear next to each other.

Don't worry about making them look beautiful yet.

CSS will later allow you to transform this simple collection of links into a professional navigation bar.

Opening a Link in a New Tab

Sometimes you want an external website to open in a new browser tab.

You can use the target attribute.

<a href="https://example.com" target="_blank">
    Visit Example
</a>

The important part is:

target="_blank"

It tells the browser to open the destination in a new browsing context, typically a new tab.

For links using target="_blank", it's also good practice to add:

rel="noopener"

Example:

<a href="https://example.com" target="_blank" rel="noopener">
    Visit Example
</a>

Email Links

HTML can also create links that open the user's email application.

Use:

<a href="mailto:hello@example.com">
    Email Us
</a>

When the visitor clicks the link, their device may open its configured email application.

You can also place it inside a sentence:

<p>
    Have a question?
    <a href="mailto:hello@example.com">Contact us by email</a>.
</p>

Best Practices

Use descriptive link text

Avoid vague text such as:

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

A better option is:

<a href="about.html">Learn About Our Team</a>

The second version tells visitors what they will find after clicking.

Use meaningful destinations

Make sure the link actually leads to the page described by the link text.

If the text says:

Learn HTML

the destination should provide information about learning HTML.

Check your links

A broken link can create a poor user experience.

After creating internal links, click them yourself and make sure the correct page opens.

Common Beginner Mistakes

Mistake 1: Forgetting href

<a>Visit Website</a>

This creates an anchor element, but there is no destination.

Correct:

<a href="https://example.com">Visit Website</a>

Mistake 2: Incorrect file path

Suppose your file is:

about.html

You should write:

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

not:

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

unless that file actually exists.

Mistake 3: Forgetting the closing tag

Incorrect:

<a href="about.html">About

Correct:

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

Practice Exercise

Create this simple navigation:

<nav>
    <a href="index.html">Home</a>
    <a href="about.html">About</a>
    <a href="contact.html">Contact</a>
</nav>

If the other HTML files don't exist yet, that's okay.

You'll create them in a future project.

For now, focus on understanding how the links are written.

Assignment

Create a webpage containing:

  • One <h1> heading.

  • One paragraph.

  • Three external links.

  • One email link.

Example:

<h1>Useful Websites</h1>

<p>Here are some websites I use for learning.</p>

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

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

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

<br><br>

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

Type the code yourself and test every link.

Summary

In this tutorial, you learned how to create links using the HTML <a> element.

You learned that the href attribute specifies the destination of a link and that links can connect:

  • External websites

  • Pages within your own website

  • Email addresses

You also learned how target="_blank" can open a link in a new tab and why descriptive link text is better for usability and accessibility.

Links are the foundation of website navigation. In the next lessons, you'll start using them to build a real multi-page website.

Frequently Asked Questions

What does <a> mean?

<a> is the HTML anchor element used to create hyperlinks.

What does href do?

The href attribute specifies where the link should go.

Can I link to another HTML file?

Yes.

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

Can I make an image clickable?

Yes. An image can be placed inside an <a> element. You'll learn this when we cover HTML images.

Next Tutorial

HTML Images (<img>) – Adding Images to Your Web Pages

In the next tutorial, you'll learn how to add images to a webpage using <img>, understand the src and alt attributes, use local image files, and create properly structured image elements.

← Previous Next →