HTML Links & Navigation

Links are what make the web a web. The <a> (anchor) element creates hyperlinks that connect pages, files, and resources.

Basic Link Syntax

Every link uses the <a> element with an href attribute:

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

Types of Links

Absolute Links

Full URLs that point to external resources:

<a href="https://www.google.com">Google</a>
<a href="mailto:[email protected]">Email Us</a>
<a href="tel:+1234567890">Call Us</a>

Relative Links

Paths relative to the current file:

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

<!-- Subdirectory -->
<a href="pages/contact.html">Contact</a>

<!-- Parent directory -->
<a href="../index.html">Home</a>

<!-- Root directory -->
<a href="/css/styles.css">Styles</a>

Link Best Practices

Always Use Descriptive Text

<!-- Bad -->
<a href="https://example.com">Click here</a>

<!-- Good -->
<a href="https://example.com">Visit Example Company</a>

External Links: Security

When linking to external sites, add security attributes:

<a href="https://example.com" target="_blank" rel="noopener noreferrer">
  External Site
</a>

• target="_blank" — Opens in new tab
• rel="noopener" — Prevents the new page from accessing your page
• rel="noreferrer" — Also hides the referrer information

Email and Phone Links

<!-- Email with subject and body -->
<a href="mailto:[email protected]?subject=Hello&body=Hi there!">
  Send Email
</a>

<!-- Phone -->
<a href="tel:+1234567890">+1 (234) 567-890</a>

Download Links

Force a file to download instead of opening:

<a href="files/resume.pdf" download>Download Resume</a>
<a href="files/image.png" download="my-image.png">Download Image</a>

Navigation Structure

Basic navigation menu:

<nav>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/services">Services</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

Page Jump Links (Anchors)

Link to specific sections on the same page:

<!-- Link to section -->
<a href="#services">Our Services</a>

<!-- Target section -->
<section id="services">
  <h2>Our Services</h2>
  <p>Content here...</p>
</section>

Complete Example

Here’s a complete navigation structure:

<header>
  <nav>
    <a href="/" class="logo">MySite</a>
    <ul>
      <li><a href="/about">About</a></li>
      <li><a href="/blog">Blog</a></li>
      <li><a href="/contact">Contact</a></li>
    </ul>
  </nav>
</header>

<main>
  <h1>Welcome to My Site</h1>
  <p>
    Learn more about
    <a href="/about">our mission</a> or
    <a href="/contact" target="_blank" rel="noopener">get in touch</a>.
  </p>

  <section id="features">
    <h2>Features</h2>
    <ul>
      <li><a href="/features/fast">Fast Performance</a></li>
      <li><a href="/features/secure">Security First</a></li>
      <li><a href="/features/easy">Easy to Use</a></li>
    </ul>
  </section>
</main>

<footer>
  <p>
    <a href="/privacy">Privacy Policy</a> |
    <a href="/terms">Terms of Service</a>
  </p>
</footer>

Common Mistakes

1. Using “click here” — Bad for accessibility and SEO
2. Forgetting rel=“noopener” — Security risk with target=“_blank”
3. Broken relative paths — Test all links before publishing
4. Missing href — <a> without href isn’t clickable
5. Using links for buttons — Use <button> for actions, <a> for navigation