Creating Links and Navigation

Links are what make the web a “web”—they connect pages together and allow users to navigate between content. In this tutorial, you’ll learn how to create links to other pages, sections within a page, and build navigation menus!

A link (also called a hyperlink) is a clickable element that takes users from one page to another, or from one section of a page to a different section. Links are created using the <a> (anchor) tag.

Every time you click on blue underlined text or a button that takes you somewhere else, you’re clicking on a link!

The basic syntax for a link is simple:

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

Let’s break this down:

Here’s a complete example:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Links</title>
</head>
<body>
<h1>Useful Resources</h1>
<p>Check out <a href="https://developer.mozilla.org">MDN Web Docs</a> for great web development tutorials!</p>
</body>
</html>

External links point to pages on other websites. Always include the full URL with https://:

<a href="https://www.google.com">Go to Google</a>
<a href="https://github.com">Visit GitHub</a>
<a href="https://www.wikipedia.org">Read Wikipedia</a>

Pro tip: Add target="_blank" to make external links open in a new tab:

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

For accessibility, also include rel="noopener noreferrer" when using target="_blank":

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

Internal links connect pages within your own website. You can use relative paths:

<!-- Link to about.html in the same directory -->
<a href="about.html">About Us</a>

<!-- Link to contact.html in the same directory -->
<a href="contact.html">Contact</a>

<!-- Link to a page in a subdirectory -->
<a href="blog/first-post.html">Read our first blog post</a>

<!-- Link to the homepage -->
<a href="index.html">Home</a>

Linking to Sections on the Same Page

You can create “anchor links” that jump to specific sections of the current page using IDs:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Table of Contents Example</title>
</head>
<body>
<h1>My Article</h1>

<!-- Table of Contents -->
<nav>
  <h2>Table of Contents</h2>
  <ul>
    <li><a href="#introduction">Introduction</a></li>
    <li><a href="#main-content">Main Content</a></li>
    <li><a href="#conclusion">Conclusion</a></li>
  </ul>
</nav>

<!-- Sections with IDs -->
<section id="introduction">
  <h2>Introduction</h2>
  <p>This is the introduction section...</p>
</section>

<section id="main-content">
  <h2>Main Content</h2>
  <p>This is the main content section...</p>
</section>

<section id="conclusion">
  <h2>Conclusion</h2>
  <p>This is the conclusion...</p>
</section>

<!-- Back to top link -->
<a href="#top">Back to top</a>
</body>
</html>

How it works:

  1. Add an id attribute to the element you want to link to
  2. Use # followed by that ID in your href attribute
  3. Clicking the link scrolls the page to that section

Create clickable email addresses using mailto::

<a href="mailto:[email protected]">Email us</a>

<!-- With a subject line -->
<a href="mailto:[email protected]?subject=Help Request">
Get Support
</a>

<!-- With subject and body -->
<a href="mailto:[email protected]?subject=Question&body=Hi there,">
Ask a Question
</a>

Make phone numbers clickable on mobile devices using tel::

<a href="tel:+1234567890">Call us: (123) 456-7890</a>

Building a Navigation Menu

Navigation menus are typically built using <nav>, <ul>, and <li> tags combined with links:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Navigation Menu Example</title>
<style>
  nav {
    background-color: #333;
    padding: 1rem;
  }

  nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 2rem;
  }

  nav a {
    color: white;
    text-decoration: none;
    font-weight: bold;
  }

  nav a:hover {
    color: #4CAF50;
  }
</style>
</head>
<body>
<nav>
  <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="services.html">Services</a></li>
    <li><a href="blog.html">Blog</a></li>
    <li><a href="contact.html">Contact</a></li>
  </ul>
</nav>

<main>
  <h1>Welcome to Our Website</h1>
  <p>Use the navigation menu above to explore!</p>
</main>
</body>
</html>

title Attribute

Add a tooltip that appears when users hover over the link:

<a href="https://www.example.com" title="Visit Example.com">
Click here
</a>

download Attribute

Force the browser to download a file instead of navigating to it:

<a href="document.pdf" download>Download PDF</a>

<!-- Specify a custom filename -->
<a href="file.pdf" download="my-document.pdf">
Download with custom name
</a>

Common Mistakes to Avoid

Forgetting the href Attribute

Problematic example:

<a>Click here</a>

Improved example:

<a href="page.html">Click here</a>

Without href, the link won’t go anywhere!

Using “Click Here” as Link Text

Problematic example:

<a href="about.html">Click here</a> to learn more about us.

Improved example:

<a href="about.html">Learn more about us</a>.

Descriptive link text is better for accessibility and SEO.

Problematic example:

<a href="www.example.com">Example</a>

Improved example:

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

Without https://, the browser treats it as a relative link!

Accessibility Best Practices

Use Descriptive Link Text

Screen readers often jump between links, so make sure your link text makes sense out of context:

Accessibility issue:

<a href="report.pdf">Click here</a> to download the annual report.

Accessible approach:

<a href="report.pdf">Download the 2024 annual report (PDF)</a>

Let users know when a link will take them away from your site:

<a href="https://www.external-site.com" target="_blank" rel="noopener noreferrer">
Visit External Site (opens in new tab)
</a>

Try It Yourself

Ready to practice? Try these challenges:

Challenge 1: Simple Link Page (Basic)

Create a page with:

Challenge 2: Multi-Page Site (Intermediate)

Build a small website with:

Challenge 3: Table of Contents (Advanced)

Create a long article page with:

What You Learned

Congratulations! You now know:

Next Steps

Now that you can create links, explore these related tutorials:

Want to practice creating links? Try our interactive HTML editor!

Back to all tutorials