🔗 Link Types and Navigation

Links are the "hyper" in hypertext — the single feature that turned a pile of documents into the World Wide Web. In this lesson you'll learn every kind of link the humble <a> element can create, how to choose the right path style, and how to assemble those links into navigation that is fast, secure, and usable by everyone.

🎯 Learning Objectives

By the end of this lesson, you will be able to:

Explain the anatomy of an anchor element and every attribute it carries (href, target, rel, download)
Choose correctly between relative, root-relative, and absolute paths for internal links
Create special-purpose links — fragment, email, phone, and download links
Build accessible navigation patterns: nav bars, breadcrumbs, and pagination
Apply the security rule for target="_blank" and write descriptive, accessible link text

Estimated Time: 30–40 minutes • Difficulty: Beginner

Hands-on: Build a small multi-page navigation set that uses every link type you learn here.

In This Lesson

Why Links Matter

When Tim Berners-Lee sketched the web in 1989, the breakthrough wasn't the page — it was the link between pages. A link lets a reader jump from one document to any other, anywhere in the world, with a single click. That one idea is why we call it a web rather than a library.

In HTML every link is created with the anchor element, <a>. Despite its tiny footprint, the anchor can navigate to another page, jump to a heading further down the current page, open an email draft, dial a phone number, or trigger a file download. Learning to wield it well is one of the highest-leverage skills in front-end development.

graph TD A[HTML Links] --> B[Internal Links] A --> C[External Links] A --> D[Special Link Types] B --> B1[Same-page fragments] B --> B2[Other pages on this site] C --> C1[Other websites] D --> D1[Email & phone] D --> D2[Downloads]

💡 Analogy: Think of your website as a building. Internal links are the doors and staircases connecting its rooms; external links are the front door out to the street. Navigation menus are the signs on every floor telling visitors where they can go next.

Anatomy of a Link

Every anchor is built from an opening tag, some clickable content, and a closing tag. The attributes on the opening tag do the real work:

<a href="about.html" target="_blank" rel="noopener" title="Learn about our team">About Us</a>

Figure 1 — The anchor element and its most common attributes. Only href is required; the rest fine-tune behaviour, security, and accessibility.

📖 Key Attributes

href (hypertext reference): the destination — a URL, a path, or a fragment. Without it, an anchor is just text.

target: where the destination opens (_self is the default; _blank opens a new tab).

rel: the relationship between your page and the linked one — used for security and SEO hints.

Link text: what the user reads and clicks. Make it descriptive, never "click here".

Internal Links & Path Styles

Internal links point to other pages within your own site. There are three ways to write the path, and choosing well saves you real pain when a site grows or moves.

Relative paths

A relative path is written from the current file's location — like giving directions from where you're standing.

<!-- Same folder -->
<a href="about.html">About Us</a>

<!-- Into a subfolder -->
<a href="products/laptop.html">Laptops</a>

<!-- Up one folder -->
<a href="../index.html">Home</a>

Root-relative paths (recommended)

A root-relative path starts with a /, meaning "from the site's root, no matter where this file lives." This is the style this very course uses, and it's the most robust for multi-folder sites.

<a href="/about.html">About Us</a>
<a href="/products/laptop.html">Laptops</a>
<a href="/contact.html">Contact</a>

Absolute paths

An absolute path is a full URL including the protocol and domain. Use it for external sites; it's overkill (and fragile) for links within your own site.

<a href="https://www.example.com/about.html">About Us</a>

Figure 2 — From a deep page, a relative path needs ../ to climb out, while a root-relative path (/about.html) resolves the same way from anywhere on the site.

✅ Rule of thumb

Use root-relative paths for internal links on any site with more than one folder — they never break when you move a page. Reserve absolute URLs for links to other domains.

External Links & Security

External links use absolute URLs to send visitors to other sites. It's common courtesy to open them in a new tab and signal that the user is leaving:

<a href="https://developer.mozilla.org"
   target="_blank"
   rel="noopener noreferrer">
  MDN Web Docs <span aria-hidden="true">↗</span>
</a>

⚠️ The `target="_blank"` security rule

When you open a link in a new tab, the new page can, in older browsers, reach back to your page through window.opener and redirect it to a malicious site (a "reverse tabnabbing" attack). Always pair target="_blank" with rel="noopener". Add noreferrer if you also want to withhold the referring URL.

Modern browsers now imply noopener for _blank automatically, but writing it explicitly keeps you safe on older engines and makes your intent clear.

The rel attribute accepts several useful values:

Value	What it does
`noopener`	Blocks the new page from accessing `window.opener` (security)
`noreferrer`	Withholds the `Referer` header from the destination
`nofollow`	Tells search engines not to pass ranking value through this link
`external`	Semantic hint that the link leaves the current site

Special Link Types

The href can hold far more than page paths. These special forms let a link trigger real-world actions.

Fragment links (same-page jumps)

Give an element an id, then link to #that-id to scroll straight to it — exactly how the table of contents at the top of this page works.

<h2 id="pricing">Pricing</h2>

<a href="#pricing">Jump to Pricing</a>

<!-- Or a fragment on another page -->
<a href="/faq.html#refunds">Read our refund policy</a>

Add html { scroll-behavior: smooth; } in CSS for a gentle animated scroll instead of an instant jump.

Email links

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

<!-- With a pre-filled subject and body (URL-encoded) -->
<a href="mailto:hello@example.com?subject=Website%20inquiry&body=Hi%20there%2C">
  Ask a question
</a>

Spaces and punctuation in the query must be URL-encoded — a space becomes %20, a comma becomes %2C.

Phone links

On phones and laptops with calling apps, a tel: link starts a call with one tap. Always include the country code.

<a href="tel:+15551234567">Call us: (555) 123-4567</a>

Download links

The download attribute asks the browser to save the file instead of navigating to it, and can even suggest a filename.

<a href="/files/report.pdf" download>Download the report</a>

<a href="/files/report.pdf" download="Annual-Report-2026.pdf">
  Download the report
</a>

📖 Note

The download attribute only forces a download for files on your own origin. Cross-origin URLs will usually still open normally for security reasons.

Building Navigation

Navigation is a collection of links given structure and meaning. Wrap them in a <nav> landmark and an ordered or unordered list so assistive technology can announce them correctly.

A primary navigation bar

<nav class="main-nav" aria-label="Primary">
  <ul>
    <li><a href="/index.html">Home</a></li>
    <li><a href="/about.html">About</a></li>
    <li><a href="/products.html" aria-current="page">Products</a></li>
    <li><a href="/contact.html">Contact</a></li>
  </ul>
</nav>

The aria-current="page" on the active link tells screen readers which page the user is currently on — a small touch with big accessibility value.

Breadcrumbs

Breadcrumbs show the user's position in the site hierarchy and give a one-click path back up. (The bar just under the top menu on this page is a breadcrumb.)

<nav aria-label="Breadcrumb">
  <ol class="breadcrumb">
    <li><a href="/index.html">Home</a></li>
    <li><a href="/products.html">Products</a></li>
    <li aria-current="page">Wireless Headphones</li>
  </ol>
</nav>

Pagination

For content split across pages, pagination provides sequential navigation. Mark the current page with aria-current and give the arrows accessible labels.

<nav aria-label="Pagination">
  <ul class="pagination">
    <li><a href="?page=1" aria-label="Previous page">« Prev</a></li>
    <li><a href="?page=1">1</a></li>
    <li><a href="?page=2" aria-current="page">2</a></li>
    <li><a href="?page=3">3</a></li>
    <li><a href="?page=3" aria-label="Next page">Next »</a></li>
  </ul>
</nav>

graph LR H[Home] --> P[Products] P --> C[Category] C --> I[Item page] I -.->|Breadcrumb back up| H

Hands-on Exercise

🏋️ Build a Mini Navigation Set

Objective: Practise every link type by wiring together a tiny two-page site.

Instructions:

Create index.html and contact.html in the same folder.
On index.html, add a <nav> with a root-relative link to each page and mark the home link with aria-current="page".
Add a heading with id="services" lower on the home page and a fragment link that jumps to it.
On contact.html, add an email link (with a subject) and a tel: link.
Add one external link that opens in a new tab with the correct rel value.

💡 Hint

Remember the ingredients: root-relative internal links start with /; a fragment link is just href="#id"; and every target="_blank" needs rel="noopener". Wrap your menu links in a <ul> inside <nav>.

✅ Sample solution (excerpt from index.html)

<nav aria-label="Primary">
  <ul>
    <li><a href="/index.html" aria-current="page">Home</a></li>
    <li><a href="/contact.html">Contact</a></li>
    <li><a href="#services">Our Services</a></li>
    <li>
      <a href="https://developer.mozilla.org" target="_blank" rel="noopener noreferrer">
        MDN ↗
      </a>
    </li>
  </ul>
</nav>

<h2 id="services">Our Services</h2>

And in contact.html:

<a href="mailto:hello@example.com?subject=Hello">Email us</a>
<a href="tel:+15551234567">Call (555) 123-4567</a>

Best Practices

✅ Do

Write descriptive link text that makes sense out of context ("View our pricing", not "click here").
Pair every target="_blank" with rel="noopener".
Use root-relative paths for internal links and mark the current page with aria-current.
Provide a skip link (<a href="#main-content">) so keyboard users can bypass the menu.
Keep touch targets at least ~44×44 px so links are easy to tap.

⚠️ Avoid

Generic text like "read more" repeated across the page — screen-reader users hear a list of identical links.
Relying on colour alone to show a link is clickable; keep an underline or other cue.
Using a <div> with a click handler where an <a> belongs — you lose keyboard access and right-click "open in new tab".
Absolute internal URLs that break the moment you change domain.

Good vs. poor link text

❌  For pricing, <a>click here</a>.
✅  View our <a>complete pricing details</a>.

Summary & Quiz

🎉 Key Takeaways

The anchor element creates every kind of link; href is its only required attribute.
Prefer root-relative paths (/page.html) for internal links; use absolute URLs for external sites.
Fragment, email, phone, and download links extend anchors into same-page jumps and real-world actions.
Always add rel="noopener" to target="_blank" links.
Structure navigation with <nav>, lists, and aria-current for accessibility.

🎯 Quick Quiz

Question 1: Which security value should always accompany target="_blank"?

Question 2: You want a link that always resolves correctly no matter which folder the current page lives in. Which path style should you use?

Question 3: Which href value creates a same-page jump to an element with id="pricing"?

📚 Further Reading

🚀 What's Next?

Now that your pages can link to anything, the next lesson brings them to life visually. We'll dive into image integration and attributes — the <img> element, responsive images, and writing alt text that works for everyone.

🎉 Great work!

You can now connect any page to any other and build navigation that's fast, secure, and accessible.