Join the AI Workshop and learn to build real-world apps with AI. A hands-on, practical program to level up your skills.
Links are fundamental to the Web, connecting pages and enabling navigation.
Basic Links
Create links with the <a> (anchor) tag:
<a href="https://example.com">Visit Example</a>Link Types
External Links
Link to other websites:
<a href="https://google.com">Google</a>Internal Links
Link to pages on your site:
<a href="/about">About Us</a>
<a href="/products/shoes">Shoes</a>Relative Links
Link relative to current location:
<a href="./page.html">Same directory</a>
<a href="../other.html">Parent directory</a>Anchor Links (Hash Links)
Link to a specific part of a page using the # symbol.
Linking to an ID
First, add an id to the target element:
<h2 id="features">Features</h2>Then link to it:
<a href="#features">Jump to Features</a>Same Page Navigation
<nav>
<a href="#intro">Introduction</a>
<a href="#features">Features</a>
<a href="#pricing">Pricing</a>
</nav>
<section id="intro">...</section>
<section id="features">...</section>
<section id="pricing">...</section>Linking to Another Page’s Section
<a href="/products#electronics">Electronics Section</a>Placeholder Links
The # alone is often used as a placeholder:
<a href="#">Coming Soon</a>Clicking this scrolls to the top of the page.
Opening Links in New Tabs
Use target="_blank":
<a href="https://example.com" target="_blank">Opens in new tab</a>For security, add rel="noopener":
<a href="https://example.com" target="_blank" rel="noopener">Safe external link</a>Download Links
Force file download instead of navigation:
<a href="/files/report.pdf" download>Download Report</a>Specify a filename:
<a href="/files/report.pdf" download="annual-report-2024.pdf">Download</a>Note: Only works for same-origin files.
Email and Phone Links
<a href="mailto:hello@example.com">Email Us</a>With subject and body:
<a href="mailto:hello@example.com?subject=Hello&body=I%20have%20a%20question">
Email Us
</a>Phone
<a href="tel:+15551234567">Call Us</a>Link Attributes
| Attribute | Purpose |
|---|---|
href | URL destination |
target | Where to open (_blank, _self, etc.) |
rel | Relationship to linked page |
download | Download instead of navigate |
title | Tooltip text on hover |
The rel Attribute
Common values:
<!-- Don't pass SEO value -->
<a href="..." rel="nofollow">User-submitted link</a>
<!-- Security for external links -->
<a href="..." rel="noopener noreferrer">External link</a>
<!-- Indicate sponsored content -->
<a href="..." rel="sponsored">Ad link</a>Styling Link States
Links have different states you can style with CSS:
a:link { color: blue; } /* Unvisited */
a:visited { color: purple; } /* Visited */
a:hover { color: red; } /* Mouse over */
a:active { color: orange; } /* Being clicked */Accessible Links
- Use descriptive text (avoid “click here”).
- Indicate external links or downloads.
- Ensure sufficient color contrast.
<!-- Bad -->
<a href="/report.pdf">Click here</a>
<!-- Good -->
<a href="/report.pdf">Download the annual report (PDF)</a>