Links are what make the web a "web"—they connect pages together, allowing users to navigate between different content. The anchor element is one of the most important and frequently used elements in HTML.
The Anchor Element
The <a> element (short for "anchor") creates hyperlinks. The most important attribute of the anchor element is href (hypertext reference), which specifies the destination of the link.
<a href="https://www.example.com">Visit Example Website</a>This creates a clickable link that takes users to example.com when clicked.
Anatomy of a Link
Let's break down the parts of a link:
<a href="https://www.example.com">Click Here</a>
│ │ │
│ │ └─ Link text (visible to users)
│ └─ href attribute (destination URL)
└─ Opening anchor tag<a>- The opening anchor taghref="..."- The destination URL- Link text - The clickable text users see
</a>- The closing anchor tag
Basic Link Examples
Linking to External Websites
<p>
Visit <a href="https://www.google.com">Google</a> to search the web.
</p>
<p>
Learn more at <a href="https://www.wikipedia.org">Wikipedia</a>.
</p>
<p>
Follow us on <a href="https://www.twitter.com">Twitter</a>.
</p>Linking to Other Pages on Your Site
<nav>
<a href="index.html">Home</a>
<a href="about.html">About</a>
<a href="contact.html">Contact</a>
<a href="services.html">Services</a>
</nav>Writing Good Link Text
The text between the anchor tags should be descriptive and tell users where the link will take them. This is important for both usability and accessibility.
❌ Poor link text:
<p>To learn more about HTML, <a href="tutorial.html">click here</a>.</p>
<p>Our privacy policy can be found <a href="privacy.html">here</a>.</p>
<p><a href="products.html">Read more</a> about our products.</p>These don't tell users what they're clicking on!
✅ Good link text:
<p>Learn more in our <a href="tutorial.html">HTML tutorial</a>.</p>
<p>Read our <a href="privacy.html">privacy policy</a>.</p>
<p>Browse our <a href="products.html">product catalog</a>.</p>Clear, descriptive text tells users exactly where they're going!
Link States and Styling
Links have different visual states that browsers style by default:
- Unvisited links: Usually blue and underlined
- Visited links: Usually purple
- Active links: Usually red (while clicking)
- Hover state: When you move your mouse over a link
You can customize these styles with CSS, but the default styling helps users understand what's clickable.
Building a Navigation Menu
Links are commonly used to create navigation menus for your website:
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
</head>
<body>
<header>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<main>
<h1>Welcome to My Website</h1>
<p>This is the homepage content.</p>
</main>
</body>
</html>Linking Images
You can make images clickable by wrapping them in anchor tags:
<a href="products.html">
<img src="product-banner.jpg" alt="View our products">
</a>
<a href="https://www.example.com">
<img src="logo.png" alt="Example Company Logo">
</a>The Title Attribute
The title attribute provides additional information about the link. It appears as a tooltip when users hover over the link:
<a href="tutorial.html" title="Learn HTML from scratch">
HTML Tutorial
</a>
<a href="pricing.html" title="View our pricing plans">
Pricing
</a>Note: Don't rely on the title attribute for critical information, as it's not accessible to touch screen users and screen readers may handle it inconsistently.
Links Don't Always Use HTTP
While most links start with http:// or https://, the href attribute can contain other types of URLs:
<!-- Email link -->
<a href="mailto:contact@example.com">Email Us</a>
<!-- Phone link -->
<a href="tel:+1234567890">Call Us</a>
<!-- FTP link -->
<a href="ftp://files.example.com">Download Files</a>We'll cover email and phone links in more detail in a later lesson.
Empty or Placeholder Links
Sometimes during development, you might need a link that doesn't go anywhere yet:
<!-- Using # as a placeholder -->
<a href="#">Coming Soon</a>
<!-- Empty href (not recommended) -->
<a href="">Placeholder</a>
<!-- JavaScript void (old method) -->
<a href="javascript:void(0)">Old Style</a>Using href="#" is the most common approach, but remember to replace it with a real URL before your site goes live!
Accessibility Tips for Links
- Use descriptive link text that makes sense out of context
- Avoid generic phrases like "click here" or "read more"
- Make sure links are visually distinct from regular text
- Ensure sufficient color contrast for users with vision impairments
- Don't rely solely on color to indicate links
- Keep link text concise but informative
Common Mistakes to Avoid
- Broken links: Always test your links to make sure they work
- Forgetting the closing tag: Always close your
<a>tags - Missing href attribute: Without href, it's not a functional link
- Nesting links: Don't put links inside other links
- Long link text: Keep link text concise and relevant
Key Takeaways
- The
<a>element creates hyperlinks - The
hrefattribute specifies the link destination - Link text should be descriptive and meaningful
- Links can point to external sites or internal pages
- Images can be made clickable by wrapping them in anchor tags
- Good link text improves both usability and accessibility
- Always test your links to ensure they work correctly
What's Next?
Now that you understand the basics of creating links, you're ready to learn about different types of URLs. In the next lesson, we'll explore the difference between absolute and relative URLs, and when to use each type.