The anchor tag creates hyperlinks:
<a href="https://example.com">Visit Example</a>
Click the link, navigate to the URL. This simple mechanism powers the entire web.
The href Attribute
href (hypertext reference) specifies the destination:
<a href="https://example.com">External link</a>
<a href="/about">Internal link</a>
<a href="#section">Anchor link</a>
<a href="mailto:email@example.com">Email link</a>
<a href="tel:+1234567890">Phone link</a>
The href value determines link behavior. Absolute URLs start with http:// or https://. Relative URLs are paths within the same site. Anchors starting with # scroll to IDs on the current page.
The target Attribute
target controls where the link opens:
<a href="https://example.com" target="_blank">Open in new tab</a>
Common values:
-
_self: Current tab (default) -
_blank: New tab -
_parent: Parent frame -
_top: Top-level frame
target="_blank" is the most used. But it has security implications.
Security: The rel="noopener" Issue
When using target="_blank", always add rel="noopener":
<a href="https://example.com" target="_blank" rel="noopener">Safe external link</a>
Without noopener, the opened page can access window.opener and potentially redirect your original page. This is a security vulnerability.
Modern browsers (2021+) add noopener behavior by default, but explicit rel="noopener" ensures compatibility with older browsers.
Also consider rel="noreferrer" to prevent sending the Referer header:
<a href="https://example.com" target="_blank" rel="noopener noreferrer">Private link</a>
The download Attribute
download prompts the browser to download instead of navigate:
<a href="/document.pdf" download>Download PDF</a>
With a value, it suggests a filename:
<a href="/doc.pdf" download="report.pdf">Download Report</a>
This only works for same-origin files. Cross-origin files navigate normally for security reasons.
Accessibility: Link Text
Screen readers announce link text. "Click here" doesn't indicate where the link goes:
<!-- Bad -->
<a href="/docs">Click here</a> for documentation.
<!-- Good -->
Read the <a href="/docs">documentation</a>.
Link text should be descriptive. Users should know the destination without surrounding context.
The title Attribute
title adds a tooltip on hover:
<a href="/about" title="Learn more about our company">About Us</a>
But don't rely on it for essential information. Not all devices show tooltips (mobile, touch screens). Screen readers may or may not announce it.
Use title for supplementary info, not critical content.
Styling Links
Links have pseudo-classes for different states:
a:link { color: blue; } /* Unvisited */
a:visited { color: purple; } /* Visited */
a:hover { color: red; } /* Mouse over */
a:active { color: green; } /* Being clicked */
a:focus { outline: 2px solid orange; } /* Keyboard focus */
Order matters. Use LVHFA (Link, Visited, Hover, Focus, Active) to avoid specificity issues.
Removing Underlines
The default underline can be removed:
a {
text-decoration: none;
}
But provide visual distinction another way. Links need to be identifiable:
a {
text-decoration: none;
color: blue;
font-weight: bold;
}
Never remove focus outlines without providing an alternative. Keyboard users depend on them.
Anchor Links (Same-Page)
Links starting with # scroll to elements with matching IDs:
<a href="#section2">Go to Section 2</a>
<!-- Later in the page -->
<h2 id="section2">Section 2</h2>
Clicking the link scrolls to the <h2>. The URL updates to include #section2.
Smooth scrolling can be added with CSS:
html {
scroll-behavior: smooth;
}
Email and Phone Links
Special URL schemes trigger apps:
<a href="mailto:contact@example.com">Email Us</a>
<a href="tel:+1234567890">Call Us</a>
Email links can include subject and body:
<a href="mailto:support@example.com?subject=Help&body=I need assistance">Get Help</a>
URL-encode special characters in the query string.
JavaScript in href (Avoid)
Avoid javascript: URLs:
<!-- Bad -->
<a href="javascript:void(0)" onclick="doSomething()">Click</a>
<!-- Better -->
<button type="button" onclick="doSomething()">Click</button>
If a link doesn't navigate, it should be a <button>. Links are for navigation.
Empty href (Anti-pattern)
Avoid empty or # href values:
<!-- Bad -->
<a href="#">Click</a>
<a href="">Click</a>
These cause unexpected behavior (scrolling to top, page reload). If you need a clickable element that doesn't navigate, use a <button>.
Links vs Buttons
Use <a> for navigation (going somewhere). Use <button> for actions (doing something):
<!-- Navigation - use <a> -->
<a href="/dashboard">View Dashboard</a>
<!-- Action - use <button> -->
<button onclick="saveForm()">Save</button>
This semantic difference matters for accessibility and SEO.
External Link Icons
Indicate external links visually:
a[href^="http"]:not([href*="yourdomain.com"])::after {
content: " ↗";
}
Or with an icon font/SVG. This helps users understand they're leaving your site.
SEO Considerations
rel="nofollow" tells search engines not to follow the link:
<a href="https://untrusted.com" rel="nofollow">User-generated link</a>
Use for user-generated content, paid links, or untrusted sources.
rel="sponsored" and rel="ugc" are more specific alternatives introduced by Google.
Further Reading
MDN's comprehensive anchor element reference documents all attributes and behaviors.
The WCAG guidelines on link purpose explain accessibility requirements for link text.
Google's qualifying outbound links guide covers rel attributes for SEO.
The <a> tag is fundamental to the web. Understanding its attributes and best practices ensures links work for everyone.
0 comments