The HTML anchor element (<a>) creates hyperlinks — the foundation of web navigation. Anchors connect pages, download files, open email clients, and jump to specific sections within long documents.

Basic Syntax 

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

The href (hypertext reference) attribute specifies the link destination. Link text between the tags should describe where the link goes — avoid “click here.”

  <a href="https://developer.mozilla.org/en-US/docs/Web/HTML"
   target="_blank"
   rel="noopener noreferrer">
  MDN HTML Documentation
</a>
  • target="_blank" opens in a new tab
  • rel="noopener noreferrer" prevents security and privacy issues with new tabs

Internal Page Links 

  <a href="about.html">About Us</a>
<a href="/contact.html">Contact</a>
<a href="../index.html">Back to Home</a>

See Absolute and Relative Paths for path rules.

Same-Page Anchor Links

Link to an element on the same page using # followed by the element’s id:

  <nav>
  <a href="#introduction">Introduction</a>
  <a href="#features">Features</a>
  <a href="#pricing">Pricing</a>
</nav>

<section id="introduction">
  <h2>Introduction</h2>
  <p>Welcome to our product...</p>
</section>

<section id="features">
  <h2>Features</h2>
  <p>Key capabilities include...</p>
</section>

<section id="pricing">
  <h2>Pricing</h2>
  <p>Plans start at...</p>
</section>

Any element with a unique id can be a link target — <h2>, <div>, <section>, etc.

Complete Example — Table of Contents 

  <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Long Article</title>
  <style>
    html { scroll-behavior: smooth; }
    nav { position: sticky; top: 0; background: #fff; padding: 1rem; }
    section { min-height: 80vh; padding: 2rem 0; }
  </style>
</head>
<body>
  <nav aria-label="Table of contents">
    <a href="#chapter1">Chapter 1</a> |
    <a href="#chapter2">Chapter 2</a> |
    <a href="#chapter3">Chapter 3</a>
  </nav>

  <main>
    <section id="chapter1">
      <h2>Chapter 1: Getting Started</h2>
      <p>Content here...</p>
    </section>
    <section id="chapter2">
      <h2>Chapter 2: Core Concepts</h2>
      <p>Content here...</p>
    </section>
    <section id="chapter3">
      <h2>Chapter 3: Advanced Topics</h2>
      <p>Content here...</p>
    </section>
  </main>

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

Add scroll-behavior: smooth in CSS for animated scrolling between sections.

Other href Values 

  <a href="mailto:[email protected]">Email Support</a>
<a href="mailto:[email protected]?subject=Help&body=Hello">Email with subject</a>
  
  <a href="tel:+15551234567">Call us</a>
  
  <a href="files/report.pdf" download="annual-report.pdf">
  Download Report (PDF)
</a>

The download attribute suggests a filename when saving.

JavaScript Placeholder (Use Sparingly) 

  <!-- Prefer button for actions -->
<button type="button" onclick="openModal()">Open modal</button>

<!-- Avoid href="#" — causes page jump -->

Use <button> for actions that do not navigate; reserve <a> for navigation.

Important Attributes

Attribute Purpose
href Destination URL or fragment
target Where to open (_blank, _self, _parent, _top)
rel Relationship (noopener, nofollow, canonical)
download Treat link as download
title Advisory tooltip (not a substitute for clear link text)
aria-current="page" Indicate current page in navigation

Accessible Navigation 

  <nav aria-label="Main navigation">
  <ul>
    <li><a href="/" aria-current="page">Home</a></li>
    <li><a href="/products">Products</a></li>
    <li><a href="/about">About</a></li>
  </ul>
</nav>
  • Use <nav> for navigation blocks
  • Link text must make sense out of context (“Read our pricing guide” not “click here”)
  • Ensure visible focus styles for keyboard users
  a:focus {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

Linking to External Page Sections

You can link to a section on another page if it has an id:

  <a href="https://example.com/docs.html#installation">Installation guide</a>

The other page must have <section id="installation"> or equivalent.

SEO Considerations

  • Use descriptive anchor text with relevant keywords naturally
  • Internal links help search engines discover pages
  • rel="nofollow" tells crawlers not to pass ranking credit (use for untrusted/user-generated links)
  <a href="https://user-submitted-site.com" rel="nofollow noopener">User link</a>

Common Mistakes

Mistake Fix
Duplicate id values Each id must be unique per page
Empty href="" Always provide a valid destination
“Click here” link text Use descriptive text
Missing rel on target="_blank" Add rel="noopener noreferrer"
Broken fragment links Verify target id exists

Next Steps

Combine anchors with Paths for correct resource linking, Images for linked thumbnails, and semantic HTML for accessible site navigation.