Links & Navigation

<a href="url">link text</a>

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

Note Always use descriptive link text. Avoid generic phrases like 'click here' as they are unhelpful for screen readers and SEO.

<a href="url" target="_blank" rel="noopener noreferrer">text</a>

<a href="https://docs.example.com" target="_blank" rel="noopener noreferrer">
  Open Documentation
</a>

Note Always pair target="_blank" with rel="noopener noreferrer" to prevent the opened page from accessing window.opener, which is a security concern.

<a href="#section-id">Jump</a>
...
<section id="section-id">Content</section>

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

<section id="features">...</section>
<section id="pricing">...</section>

Note Use scroll-behavior: smooth in CSS for an animated scroll to anchor targets. The id must be unique on the page.

<nav aria-label="description">
  <a href="/">Home</a>
  ...
</nav>

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

Note Use nav for major navigation blocks, not every group of links. If multiple nav elements exist on a page, give each a unique aria-label to distinguish them for assistive tech.

<a href="file-url" download="filename">Download</a>

<a href="/reports/q4-summary.pdf" download="Q4-Report.pdf">
  Download Q4 Report
</a>

Note The download attribute only works for same-origin URLs or blob/data URIs. Cross-origin files will open in the browser instead of downloading.

<a href="mailto:email@example.com">Email</a>
<a href="tel:+15551234567">Call</a>

<a href="mailto:support@example.com?subject=Help%20Request">Email Support</a>
<a href="tel:+15551234567">+1 (555) 123-4567</a>

Note Use url-encoded characters in mailto query strings for subject and body. Phone numbers should use the international E.164 format with the + prefix.

<a href="url" rel="value">text</a>

<a href="https://partner.com" rel="nofollow">Sponsored Partner</a>
<a href="/next-page" rel="next">Next Page</a>
<link rel="preconnect" href="https://fonts.example.com">

Note Common rel values: nofollow (tells search engines not to follow), noopener (security for new tabs), preconnect (early connection to external origins), canonical (preferred URL).