Creating Links with the Anchor Tag

Learning HTML can feel like a big step, but creating links is one of the easiest and most satisfying things you can do on a web page. With just a single HTML tag, you can connect pages, send people to your social media, or let them download a file.

In this article, you’ll learn how to use the HTML anchor tag (written as <a>) to create different kinds of links. We’ll go step-by-step, with simple examples you can copy, paste, and experiment with on your own.

What Is the Anchor Tag?

The anchor tag is an HTML element used to create links. It looks like this:

<a href="https://example.com">Click me</a>

Let’s break that down:

<a> is the anchor tag.
href is an attribute (a setting that gives extra information).
The value of href ("https://example.com") is the destination of the link.
Click me is the text people will click on.

When someone clicks the text, their browser will go to the link in the href attribute.

Your First Link (Step-by-Step)

Let’s create your first HTML link from scratch.

Open a simple text editor (like Notepad on Windows or TextEdit on Mac set to plain text).
Create a new file and paste this code:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>My First Link</title>
  </head>
  <body>
    <!-- This is a simple link to a website -->
    <a href="https://www.wikipedia.org">Go to Wikipedia</a>
  </body>
</html>

Save the file as link-example.html.
Double-click the file to open it in your web browser.

You should see the text “Go to Wikipedia”. When you click it, your browser should open Wikipedia.

What’s Happening Here?

<a href="https://www.wikipedia.org"> starts the link.
Go to Wikipedia is the clickable text.
</a> ends the link.

Everything between <a ...> and </a> becomes clickable.

Making Links to Other Websites

You can link to any website by changing the href value.

<!-- Link to Google -->
<a href="https://www.google.com">Search on Google</a>

<!-- Link to YouTube -->
<a href="https://www.youtube.com">Watch videos on YouTube</a>

When these lines are inside your <body> tag, your page will show two links. Clicking them will take you to Google or YouTube.

Opening Links in a New Tab

Sometimes you want the link to open in a new browser tab so your original page stays open. You can do this with the target attribute.

<a href="https://www.google.com" target="_blank">Open Google in a new tab</a>

target="_blank" tells the browser: "Open this link in a new tab (or window)."

Tip: Many websites use this for external links so visitors don’t completely leave the site.

Linking to Your Own Pages (Relative Links)

So far we’ve linked to full web addresses (like https://...). These are called absolute URLs.

You can also link to another page on your own website. These are called relative URLs because the link is relative to the current file.

Example: Link Between Two Local Files

Create a folder called my-site.
Inside it, create two files:
- index.html
- about.html

Put this code into index.html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Home Page</title>
  </head>
  <body>
    <h1>Welcome to My Site</h1>
    <!-- Link to the about page in the same folder -->
    <a href="about.html">About Me</a>
  </body>
</html>

Now put this code into about.html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>About Me</title>
  </head>
  <body>
    <h1>About Me</h1>
    <p>Hello! This is my about page.</p>

    <!-- Link back to the home page -->
    <a href="index.html">Back to Home</a>
  </body>
</html>

Open index.html in your browser.

Click “About Me” to go to about.html.
On the About page, click “Back to Home” to return.

You’ve just created basic navigation between two pages!

Try It Yourself: Build a Mini Navigation Menu

Use what you’ve learned to create a simple three-link menu.

In your index.html, inside <body>, add:

<nav>
  <!-- Simple navigation menu -->
  <a href="index.html">Home</a> |
  <a href="about.html">About</a> |
  <a href="contact.html">Contact</a>
</nav>

Create a new file contact.html with a heading and a short message.
Open index.html in your browser and test all three links.

You can experiment by changing the order of the links or the text between them.

Linking to Sections on the Same Page

You can also use the anchor tag to jump to a specific part of the same page. This is useful for long pages with sections like "Top", "About", "Contact", and so on.

To do this, you need two things:

An element with an id (a unique name).
A link that points to that id using #.

Example: Jump to a Section

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Page with Sections</title>
  </head>
  <body>
    <!-- Menu at the top -->
    <a href="#top">Top</a> |
    <a href="#about">About</a> |
    <a href="#contact">Contact</a>

    <!-- The "top" section -->
    <h1 id="top">Welcome</h1>
    <p>This is the top of the page.</p>

    <!-- The "about" section -->
    <h2 id="about">About</h2>
    <p>Some information about this page.</p>

    <!-- The "contact" section -->
    <h2 id="contact">Contact</h2>
    <p>Contact details go here.</p>
  </body>
</html>

id="top", id="about", and id="contact" mark each section.
href="#about" means "go to the element with id about on this page".

Clicking the links at the top will scroll you directly to the chosen section.

Try it yourself: Add another section, like id="faq", and create a matching link at the top.

Making Links More Accessible

Accessibility means making your site easier for everyone to use, including people using screen readers.

Here are two simple tips:

Use clear link text.
- Bad: Click here
- Better: Read my portfolio
Use the title attribute for extra info (optional).

<a href="https://www.example.com/portfolio" title="View my web design work">
  View my portfolio
</a>

Some browsers and screen readers use this extra description to help people understand where the link goes.

Quick Recap

You’ve just learned how to:

Use the anchor tag <a> to create clickable links.
Link to other websites with href="https://...".
Open links in a new tab using target="_blank".
Link between your own pages using relative links.
Jump to sections on the same page using id and #section-name.
Create email and phone links with mailto: and tel:.

If this is your first time working with HTML, you’ve already taken a big step. Every website you visit uses these same basic anchor tags.

What’s next?

Add more links to your pages and play with different href values.
Combine links with images (for example, clicking a logo to go home).
Learn basic CSS to style your links with colors and hover effects.

Keep experimenting. Even small practice pages help you build real skills, one link at a time.

Mudzinga

Creating Links with the Anchor Tag

What Is the Anchor Tag?

Your First Link (Step-by-Step)

What’s Happening Here?

Making Links to Other Websites

Opening Links in a New Tab

Linking to Your Own Pages (Relative Links)

Example: Link Between Two Local Files

Try It Yourself: Build a Mini Navigation Menu

Linking to Sections on the Same Page

Example: Jump to a Section

Other Useful Types of Links

Email Links

Phone Links (for Mobile)

Making Links More Accessible

Quick Recap

About Percy Mudzinga

Related Articles

Creating Links with the Anchor Tag

What Is the Anchor Tag?

Your First Link (Step-by-Step)

What’s Happening Here?

Making Links to Other Websites

Opening Links in a New Tab

Linking to Your Own Pages (Relative Links)

Example: Link Between Two Local Files

Try It Yourself: Build a Mini Navigation Menu

Linking to Sections on the Same Page

Example: Jump to a Section

Other Useful Types of Links

Email Links

Phone Links (for Mobile)

Making Links More Accessible

Quick Recap

About Percy Mudzinga

Related Articles

Never Miss an Update