The Quick Start

Hyperlinks and Anchors

  • Beginner
  • December 29, 2025
Written by Fahim ul Haq

Fahim ul Haq is the co-founder and CEO of Educative, the world's leading upskilling platform for and by developers. He is a former software engineer at Microsoft and Facebook with a deep passion for creating better, more efficient ways for developers to master in-demand skills.

Hyperlinks are what turn individual web pages into a connected web. Without links, every page would exist in isolation, and the internet as we know it wouldn’t exist.

In this lesson, you’ll learn how hyperlinks work in HTML, how to create them using anchor tags, and how to link pages, sections, and external websites together. You’ll also practice building real links step by step so you can confidently use them in your own pages.

By the end of this lesson, you’ll understand not just how to create links, but how to use them thoughtfully and correctly.

What is a hyperlink?

A hyperlink is a clickable connection between one resource and another. That resource might be another page, a specific section on the same page, a file, or an external website.

When you click a link, the browser navigates to the location defined by that link. This simple action is the foundation of how users move through the web.

In HTML, hyperlinks are created using anchor elements, which is why links are often referred to as “anchors.”

The anchor tag (<a>)

All hyperlinks in HTML are created using the <a> tag. The “a” stands for anchor.

Here is the simplest possible link:

				
					<a href="https://www.how.dev">Visit how.dev</a>

The text between the opening and closing <a> tags is the clickable part of the link. The href attribute tells the browser where the link should go.

When a user clicks this link, the browser navigates to the URL provided in href.

Understanding the href attribute

The href attribute stands for hypertext reference. It defines the destination of the link.

Without an href, the anchor tag does not function as a link. It may still appear clickable, but it won’t take the user anywhere.

The value of href can point to many different types of destinations, which you’ll explore throughout this lesson.

Adding your first link to a page

Let’s add a hyperlink to a basic HTML page.

Start with this structure:

				
					<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Hyperlinks and Anchors</title>
  </head>
  <body>
    <h1>My First Link</h1>
  </body>
</html>

Now add a paragraph with a link inside the body:

				
					<p>
  Visit <a href="https://www.how.dev">how.dev</a> to continue learning HTML.
</p>

Save the file and open it in your browser. You should see a clickable link. When you click it, the browser navigates to the specified website.

Linking to external websites

Links that point to other websites are called external links. These usually include the full URL, starting with https://.

Example:

				
					<a href="https://developer.mozilla.org" target="_blank" rel="noopener">MDN Web Docs</a>

External links are commonly used to reference resources, documentation, or related content outside your site.

When linking externally, it’s important to make link text clear and meaningful so users know where the link will take them.

Writing good link text

One of the most important habits you can build early is writing good link text.

Link text should describe the destination or purpose of the link. Avoid vague phrases like “click here” or “read more.”

For example, this is not ideal:

				
					<a href="https://how.dev" target="_blank" rel="noopener">Click here</a>

A better version would be:

				
					<a href="https://www.how.dev">Learn web development on how.dev</a>

This improves usability, accessibility, and clarity for all users.

Linking to pages within your site

Links don’t have to point to external websites. You can also link between pages on your own site.

This is done using relative paths, which refer to files in the same folder or directory.

For example, if you have two files:

  • index.html
  • about.html

You can link from one to the other like this:

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

When the user clicks the link, the browser loads the about.html file.

Step-by-step: creating internal links

Create a second file called about.html with this content:

				
					<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>About</title>
  </head>
  <body>
    <h1>About This Site</h1>
    <p>This page explains what the site is about.</p>
  </body>
</html>

Now, in your index.html, add this link:

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

Save both files and open index.html in your browser. Clicking the link should navigate to the About page.

This is one of the most important concepts in web development: pages connected through links.

Relative vs absolute URLs

An absolute URL includes the full web address, including the protocol and domain.

Example:

				
					<a href="https://how.dev/learn/html" target="_blank" rel="noopener">HTML Course</a>

A relative URL points to a file relative to the current page’s location.

Example:

				
					<a href="learn.html">HTML Lesson</a>

Relative URLs are commonly used for internal navigation because they make sites easier to move and deploy.

Opening links in a new tab

Sometimes you want a link to open in a new browser tab. This is done using the target attribute.

Example:

				
					<a href="https://www.how.dev" target="_blank">Visit how.dev</a>

The value _blank tells the browser to open the link in a new tab.

Use this sparingly. Opening new tabs unexpectedly can be confusing for users. It’s usually best reserved for external links.

Adding link titles

You can add additional information to a link using the title attribute.

Example:

				
					<a href="https://www.how.dev" title="Learn web development step by step">
  how.dev
</a>

When users hover over the link, the title text appears as a tooltip. This can be helpful, but it should not replace clear link text.

Anchors within the same page

Links don’t always need to go to a different page. You can link to specific sections within the same page using anchor links.

This is useful for long pages, tables of contents, or “back to top” links.

To do this, you need two things:

  1. An element with an id
  2. A link that points to that id

Step-by-step: linking to a section on the same page

First, add an id to a heading:

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

Now create a link that points to that section:

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

When the link is clicked, the browser scrolls to the element with the matching id.

Creating a table of contents

Anchor links are often used to create tables of contents for long pages.

Example:

				
					<h2>Contents</h2>
<p>
  <a href="#introduction">Introduction</a><br>
  <a href="#features">Features</a><br>
  <a href="#contact">Contact</a>
</p>

Each link jumps to a different section of the page, improving navigation.

Email and phone links

Anchors can also be used to create email and phone links.

An email link looks like this:

				
					<a href="mailto:example@email.com">Email me</a>

A phone link looks like this:

				
					<a href="tel:+1234567890">Call us</a>

When clicked, these links open the user’s email client or phone dialer.

Wrapping other elements with links

Links are not limited to text. You can wrap images or other elements inside anchor tags.

Example:

				
					<a href="https://www.how.dev">
  <img decoding="async" src="logo.png" alt="how.dev logo" />
</a>

This makes the image clickable. This technique is commonly used for logos and banners.

Accessibility and links

Links play a major role in accessibility. Screen readers announce links and allow users to navigate between them.

This is why descriptive link text is so important. Screen reader users often browse links out of context.

Instead of hearing “click here,” they should hear something meaningful like “Learn HTML basics.”

Common beginner mistakes with links

One common mistake is forgetting to include the href attribute. Without it, the anchor tag won’t function as a link.

Another mistake is using vague or repeated link text, which makes navigation confusing.

Some beginners also misuse anchor links by forgetting to add matching id attributes.

Carefully checking your links is a good habit to build early.

Practice: building a navigation section

Add this to your HTML body to practice linking:

				
					<h2>Navigation</h2>
<p>
  <a href="index.html">Home</a> |
  <a href="about.html">About</a> |
  <a href="#contact">Contact</a>
</p>

<h2 id="contact">Contact</h2>
<p>
  You can reach us by email or phone.
</p>

Save and refresh. Click each link to see how navigation works.

How links prepare you for real websites

Almost every real website relies heavily on links. Navigation menus, buttons, footers, and calls to action all use anchor tags behind the scenes.

Learning to create clean, meaningful links now makes building real sites much easier later.

What you should understand after this lesson

By now, you should be comfortable with:

  • Creating links using the <a> tag
  • Understanding the href attribute
  • Linking to external and internal pages
  • Using anchor links within a page
  • Writing clear and accessible link text

You don’t need to master every variation yet. Focus on understanding how links connect content.

What’s next?

Now that you know how to connect pages and sections using hyperlinks, you’re ready to work with media.

In the next lesson, you’ll learn how to add images to your web pages and control how they appear using HTML.

Before moving on, try creating a small multi-page site with at least three pages connected using links. This simple exercise reinforces one of the most important ideas behind the web: everything is connected.

On this page

    In This Module

    1. The Quick Start