Content & MediaBeginner⏱ 7 min05 / 8

Links & Navigation

Learn how to connect web pages together using anchor tags, build in-page navigation with IDs, and create a clean, accessible nav bar.

The web is literally a web — billions of pages linked together. Every clickable link you have ever followed was created with one tiny HTML element: <a>. Mastering anchors unlocks the ability to guide your readers from one page to another, jump them to a section of a long document, or open an external resource in a new tab. By the end of this lesson you will understand how links work under the hood and be able to build a real navigation bar.

#The Anchor Element

The <a> (anchor) element wraps any content — text, an image, even a button — and makes it a clickable hyperlink. The most important attribute is href (short for hypertext reference), which tells the browser where to go.

html
<a href="https://example.com">Visit Example</a>
Think of it like

Links are like street signs

An <a> tag is the sign post; the href is the address printed on it. Without the address the sign is just a piece of metal — it looks like a link but goes nowhere.

#Absolute vs. Relative URLs

URLs come in two flavors: absolute and relative.

  • An absolute URL contains the full address, including the protocol (https://), the domain, and the path. Use these when linking to another website.
  • A relative URL describes a path relative to the current page. Use these when linking to pages within your own site — they automatically adjust when you move your project to a different server.
Use absolute URLs for external sites; use relative URLs within your own project.
<!-- Absolute: full address, links to another site -->
<a href="https://developer.mozilla.org">MDN Web Docs</a>

<!-- Relative: links to about.html in the same folder -->
<a href="about.html">About Us</a>

<!-- Relative: links to a file one folder up, then into blog/ -->
<a href="../blog/post.html">Latest Post</a>

#Opening Links in a New Tab

Adding target="_blank" makes the link open in a new browser tab. This is common for external links so users do not lose their place on your site. However, it comes with a subtle security concern — the new page could access and manipulate the opener page. Always pair target="_blank" with rel="noopener noreferrer" to close that loophole.

html
<a
  href="https://example.com"
  target="_blank"
  rel="noopener noreferrer"
>
  Open in new tab
</a>
Common mistake

Never use target="_blank" without rel="noopener"

Without rel="noopener noreferrer", the newly opened page can call window.opener and redirect your original page to a malicious URL — a classic phishing trick. Modern browsers have started patching this, but adding the attribute yourself is still best practice and required by most linters.

#Linking Within a Page (Fragment Links)

Long pages benefit from jump links that scroll the reader directly to a section. You do this in two steps:

  1. Give the destination element a unique id attribute.
  2. Set the link's href to # followed by that id.

When clicked, the browser scrolls smoothly to that element.

html
<!-- The link that jumps -->
<a href="#contact">Jump to Contact</a>

<!-- ... lots of content ... -->

<!-- The destination -->
<section id="contact">
  <h2>Contact Us</h2>
  <p>Reach us at hello@example.com</p>
</section>

#Building a Navigation Bar

A navigation bar is usually a <nav> element containing an unordered list (<ul>) of links. The <nav> landmark helps screen readers and search engines understand that this group of links is site navigation — not just any list.

html
<nav>
  <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="#contact">Contact</a></li>
    <li>
      <a
        href="https://github.com"
        target="_blank"
        rel="noopener noreferrer"
      >GitHub</a>
    </li>
  </ul>
</nav>
Tip

Mark the active page

Add aria-current="page" to the link that points to the current page. Screen readers announce it, and you can style it with CSS using [aria-current='page'] { font-weight: bold; }.

Quick check

Which link opens a page in a new browser tab AND prevents the opened page from accessing window.opener?

Key takeaways

  • The <a href="..."> anchor element is how every hyperlink on the web is made.
  • Use absolute URLs (with https://) for external sites and relative URLs for pages within your own project.
  • Always add rel="noopener noreferrer" alongside target="_blank" to prevent a security vulnerability.
  • Fragment links (#section-id) let users jump to any element on the same page — perfect for long articles.
  • Wrap your links in a <nav> element to give screen readers and search engines a clear navigation landmark.
Practice challenges
Test yourself · earn XP
0/4
Fill in the blank#1

Complete this anchor tag. Fill in the attribute that tells the browser where to go, and the value that safely opens external links in a new tab.

<a href="https://example.com" target="_blank" rel="">Open</a>
Fill in the blank#2

This link should jump to the section below when clicked. Fill in the href value and the matching attribute on the section so they connect.

<a href="">Jump to Contact</a>

<section ="contact">
  <h2>Contact Us</h2>
</section>
Fix the bug#3

This link is meant to point to another website, but it goes nowhere. What's wrong?

fix-bug
<a href="developer.mozilla.org">MDN Web Docs</a>
Reorder the lines#4

Arrange these lines into a valid navigation bar: a <nav> landmark wrapping an unordered list with two link items.

1
  <ul>
2
    <li><a href="about.html">About</a></li>
3
</nav>
4
<nav>
5
  </ul>
6
    <li><a href="index.html">Home</a></li>
Your turn
Practice exercise

Build a one-page site skeleton with a navigation bar at the top. The nav should have three links: one to an external site (opens in a new tab, safely), one that jumps to a #features section on the same page, and one relative link to about.html. Below the nav, add a section with id="features" and a short heading inside it.

Try it live — edit the code and hit Run to see it rendered:

solution.html · editable