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

<a href="url" target="_blank" rel="noopener" title="Description">Link Text</a> │
│ │ │ │ │ │ │ │ │ │ └── Visible text │ │ │ │ └── Tooltip │ │ │ └── Security/SEO
relationship │ │ └── Where to open │ └── Destination URL └── Anchor element

<!-- Absolute URLs -->
<a href="https://example.com">External Site</a>
<a href="https://example.com/products/item-1">Specific Page</a>

<!-- Relative URLs -->
<a href="about.html">Same folder</a>
<a href="pages/contact.html">Subfolder</a>
<a href="../index.html">Parent folder</a>
<a href="../../archive/old.html">Two levels up</a>

<!-- Root-relative URLs (recommended) -->
<a href="/about">About</a>
<a href="/products/item-1">Product</a>

<!-- Current page anchors -->
<a href="#top">Go to top</a>
<a href="#contact-form">Jump to form</a>

<!-- Anchor on another page -->
<a href="faq.html#question-5">Specific FAQ</a>

<!-- Open in same tab (default) -->
<a href="page.html" target="_self">Same Tab</a>

<!-- Open in new tab/window -->
<a href="https://example.com" target="_blank">New Tab</a>

<!-- Open in parent frame -->
<a href="page.html" target="_parent">Parent Frame</a>

<!-- Open in full window (escape frames) -->
<a href="page.html" target="_top">Full Window</a>

<!-- Named window/tab -->
<a href="page1.html" target="myWindow">Link 1</a>
<a href="page2.html" target="myWindow">Link 2</a>
<!-- Both open in same window named "myWindow" -->

<!-- Security for external links (always use with target="_blank") -->
<a href="https://example.com" target="_blank" rel="noopener noreferrer">
  External Link
</a>

<!-- SEO: Don't pass authority -->
<a href="https://ad.com" rel="nofollow">Paid Link</a>

<!-- Sponsored/advertising link -->
<a href="https://sponsor.com" rel="sponsored">Sponsor</a>

<!-- User-generated content -->
<a href="https://user-link.com" rel="ugc">Posted by User</a>

<!-- Alternate version -->
<a href="page-fr.html" rel="alternate" hreflang="fr">Français</a>

<!-- Next/Previous in sequence -->
<a href="page-2.html" rel="next">Next</a>
<a href="page-1.html" rel="prev">Previous</a>

<!-- Basic email -->
<a href="mailto:contact@example.com">Email Us</a>

<!-- Email with subject -->
<a href="mailto:contact@example.com?subject=Inquiry">Send Inquiry</a>

<!-- Email with subject and body -->
<a
  href="mailto:contact@example.com?subject=Hello&body=I%20wanted%20to%20ask..."
>
  Contact Us
</a>

<!-- Multiple recipients -->
<a href="mailto:sales@example.com,support@example.com">Email Team</a>

<!-- CC and BCC -->
<a href="mailto:main@example.com?cc=copy@example.com&bcc=hidden@example.com">
  Email with CC
</a>

<!-- Phone link -->
<a href="tel:+12025551234">Call: (202) 555-1234</a>

<!-- SMS link -->
<a href="sms:+12025551234">Send SMS</a>

<!-- SMS with body -->
<a href="sms:+12025551234?body=Hello">Send SMS</a>

<!-- Basic download -->
<a href="document.pdf" download>Download PDF</a>

<!-- Download with custom filename -->
<a href="file-v2.3.1.pdf" download="user-manual.pdf"> Download User Manual </a>

<!-- Download multiple formats -->
<a href="image.png" download="photo.png">PNG</a>
<a href="image.svg" download="photo.svg">SVG</a>

<!-- Table of contents with anchors -->
<nav>
  <a href="#introduction">Introduction</a>
  <a href="#features">Features</a>
  <a href="#conclusion">Conclusion</a>
</nav>

<!-- Anchor targets -->
<section id="introduction">
  <h2>Introduction</h2>
  <p>Content...</p>
</section>

<section id="features">
  <h2>Features</h2>
  <p>Content...</p>
</section>

<section id="conclusion">
  <h2>Conclusion</h2>
  <p>Content...</p>
</section>

<!-- Back to top -->
<a href="#top">Back to Top</a>

<!-- Smooth scrolling (CSS) -->
<style>
  html {
    scroll-behavior: smooth;
  }
</style>

<nav>
  <a href="/">Home</a>
  <a href="/about">About</a>
  <a href="/products">Products</a>
  <a href="/contact">Contact</a>
</nav>

<nav aria-label="Main navigation">
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/products">Products</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

<nav aria-label="Breadcrumb">
  <ol>
    <li><a href="/">Home</a></li>
    <li><a href="/products">Products</a></li>
    <li><a href="/products/electronics">Electronics</a></li>
    <li aria-current="page">Smartphones</li>
  </ol>
</nav>

<body>
  <a href="#main-content" class="skip-link">Skip to main content</a>

  <nav><!-- Navigation --></nav>

  <main id="main-content">
    <!-- Main content -->
  </main>
</body>

<style>
  .skip-link {
    position: absolute;
    left: -9999px;
  }
  .skip-link:focus {
    left: 10px;
    top: 10px;
  }
</style>

<!-- Link wrapping text -->
<a href="/product">Buy Now</a>

<!-- Link wrapping block content (HTML5) -->
<a href="/article">
  <article>
    <h2>Article Title</h2>
    <p>Article description...</p>
  </article>
</a>

<!-- Link wrapping image -->
<a href="/gallery">
  <img src="thumbnail.jpg" alt="Gallery preview" />
</a>

<!-- Card as link -->
<a href="/product/123" class="card">
  <img src="product.jpg" alt="" />
  <h3>Product Name</h3>
  <p>$99.99</p>
</a>

/* Unvisited link */
a:link {
  color: blue;
}

/* Visited link */
a:visited {
  color: purple;
}

/* Hover state */
a:hover {
  color: red;
}

/* Active state (clicking) */
a:active {
  color: orange;
}

/* Focused (keyboard navigation) */
a:focus {
  outline: 2px solid blue;
}

/* Order matters: LVHFA (LoVe HAte Focus After) */