HTML Links Guide

Learn how to create effective, accessible hyperlinks in HTML

Introduction to HTML Links

Hyperlinks are the foundation of web navigation, connecting documents and resources across the internet. The HTML <a> (anchor) element creates hyperlinks that can point to:

Other web pages (internal or external)
Specific sections within a page
Files to download
Email addresses and phone numbers
JavaScript functionality

Well-structured links are essential for usability, accessibility, and search engine optimization. This guide covers all aspects of creating effective HTML links.

<a>

The anchor element creates hyperlinks

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

Attributes: href (required), target, rel, download

Usage: For navigation between pages or resources

Absolute URLs

Links to external resources with full URL

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

Usage: Linking to other websites

Relative URLs

Links to internal resources with relative paths

<a href="/about.html">About Page</a>

Usage: Linking within the same website

Download Links

Triggers file download instead of navigation

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

Attributes: download (optional filename)

Usage: For PDFs, documents, or other downloadable files

target

Specifies where to open the linked document

Values: _blank, _self, _parent, _top

<a href="https://example.com" target="_blank">New Tab</a><a href="https://example.com" target="_blank">New Tab</a>

Notes: Use with rel='noopener noreferrer' for security

rel

Relationship between current and linked document

Values: nofollow, noopener, noreferrer, external

<a href="https://example.com" rel="nofollow noopener">External Link</a><a href="https://example.com" rel="nofollow noopener">External Link</a>

Notes: Important for SEO and security

download

Indicates the link should download a resource

Values: Boolean or filename

<a href="/resume.pdf" download="john-doe-resume.pdf">Download Resume</a><a href="/resume.pdf" download="john-doe-resume.pdf">Download Resume</a>

Notes: Only works for same-origin URLs

aria-label

Accessible name for screen readers

Values: Descriptive text

<a href="/settings" aria-label="Account settings"><i class="gear-icon"></i></a><a href="/settings" aria-label="Account settings"><i class="gear-icon"></i></a>

Notes: Essential for icon-only links

<nav aria-label="Main navigation">
  <ul>
    <li><a href="/" aria-current="page">Home</a></li>
    <li><a href="/about">About Us</a></li>
    <li><a href="/services">Services</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav><nav aria-label="Main navigation">
  <ul>
    <li><a href="/" aria-current="page">Home</a></li>
    <li><a href="/about">About Us</a></li>
    <li><a href="/services">Services</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

Footer Links

External linksSocial iconsAccessibility

<footer>
  <div class="footer-links">
    <a href="/privacy">Privacy Policy</a>
    <a href="/terms">Terms of Service</a>
    <a href="/sitemap">Sitemap</a>
  </div>
  <div class="social-links">
    <a href="https://facebook.com/example" target="_blank" rel="noopener noreferrer" aria-label="Facebook">
      <i class="fab fa-facebook"></i>
    </a>
    <a href="https://twitter.com/example" target="_blank" rel="noopener noreferrer" aria-label="Twitter">
      <i class="fab fa-twitter"></i>
    </a>
  </div>
</footer><footer>
  <div class="footer-links">
    <a href="/privacy">Privacy Policy</a>
    <a href="/terms">Terms of Service</a>
    <a href="/sitemap">Sitemap</a>
  </div>
  <div class="social-links">
    <a href="https://facebook.com/example" target="_blank" rel="noopener noreferrer" aria-label="Facebook">
      <i class="fab fa-facebook"></i>
    </a>
    <a href="https://twitter.com/example" target="_blank" rel="noopener noreferrer" aria-label="Twitter">
      <i class="fab fa-twitter"></i>
    </a>
  </div>
</footer>

Call-to-Action Buttons

Styling as buttonsPhone/email linksIcon integration

<div class="cta-section">
  <a href="/signup" class="cta-button">Sign Up Now</a>
  <a href="tel:+15551234567" class="cta-button phone-link">
    <i class="fas fa-phone"></i> Call Us
  </a>
  <a href="mailto:contact@example.com" class="cta-button email-link">
    <i class="fas fa-envelope"></i> Email Us
  </a>
</div><div class="cta-section">
  <a href="/signup" class="cta-button">Sign Up Now</a>
  <a href="tel:+15551234567" class="cta-button phone-link">
    <i class="fas fa-phone"></i> Call Us
  </a>
  <a href="mailto:contact@example.com" class="cta-button email-link">
    <i class="fas fa-envelope"></i> Email Us
  </a>
</div>

Link Text Clarity

Use descriptive link text that makes sense out of context

Not Recommended

<a href="/annual-report-2023.pdf">Click here</a><a href="/annual-report-2023.pdf">Click here</a>

Why: Screen readers often list links out of context

External Link Security

Secure external links that open in new tabs

Not Recommended

<a href="https://external.com" target="_blank">External Site</a><a href="https://external.com" target="_blank">External Site</a>

Why: rel='noopener noreferrer' prevents security vulnerabilities

Accessible Icon Links

Make icon-only links accessible

Not Recommended

<a href="/search"><i class="fas fa-search"></i></a><a href="/search"><i class="fas fa-search"></i></a>

Why: Icon-only links need text alternatives

Styling Considerations

Ensure links are visually distinguishable

Not Recommended

<style>
  a { color: #333; text-decoration: none; }
</style><style>
  a { color: #333; text-decoration: none; }
</style>

Why: Links should be obviously clickable

Fragment Identifiers

Linking to specific page sections

<a href="#section-2">Jump to Section 2</a>
<!-- Later in document -->
<section id="section-2">...</section><a href="#section-2">Jump to Section 2</a>
<!-- Later in document -->
<section id="section-2">...</section>

Use Case: For long pages with multiple sections

JavaScript Enhanced Links

Adding click handlers while maintaining accessibility

<a href="/fallback-page" onclick="handleClick(event)">Interactive Link</a>
<script>
  function handleClick(e) {
    e.preventDefault();
    // Custom logic
    window.location = e.target.href; // Fallback
  }
</script><a href="/fallback-page" onclick="handleClick(event)">Interactive Link</a>
<script>
  function handleClick(e) {
    e.preventDefault();
    // Custom logic
    window.location = e.target.href; // Fallback
  }
</script>

Use Case: When adding custom behavior to links

Protocol-Relative URLs

Links that adapt to http/https automatically

<a href="//example.com/resource">Secure Resource</a><a href="//example.com/resource">Secure Resource</a>

Use Case:

Note: Use with caution - modern best practice is to always specify https://

Links Playground

Experiment with different types of HTML links in our live editor

Link Examples Preview

Ready-to-use examples covering different link scenarios

Live Preview

Link Types Included

Basic Links

Internal/External

Bookmarks

Page sections

Email/Tel

Contact links

Download

File resources

All examples will be loaded into an interactive editor where you can modify and test them

< Previous Next >

HTML Links Guide

Introduction to HTML Links

Basic Link Types

<a>

Absolute URLs

Relative URLs

Download Links

Link Attributes

target

rel

download

aria-label

Practical Link Examples

Navigation Menu

Footer Links

Call-to-Action Buttons

Link Best Practices

Link Text Clarity

Recommended

Not Recommended

External Link Security

Recommended

Not Recommended

Accessible Icon Links

Recommended

Not Recommended

Styling Considerations

Recommended

Not Recommended

Advanced Link Techniques

Fragment Identifiers

JavaScript Enhanced Links

Protocol-Relative URLs

Links Playground

Link Examples Preview

Link Types Included