Description
The HTML <a> (Anchor) element creates hyperlinks that connect web pages, resources, downloadable files, email addresses, and phone numbers. It is the core element that links the entire World Wide Web together.
By default, browsers render <a> elements as inline elements with blue underlined text (or purple once visited). In modern HTML5, anchor tags can also wrap entire containers, cards, and images to make large interactive touch areas.
CSS Display:inline
Syntax
<a href="https://example.com" target="_blank" rel="noopener noreferrer">Visit Website</a>
Popular Attributes
| Attribute | Description |
|---|
| hrefRequired | Specifies the target URL or location the hyperlink points to. Supports absolute URLs, relative URLs, bookmark anchors (#id), and protocols like mailto: and tel:. |
| target | Specifies where to open the linked document. Values: _self (same tab/frame, default), _blank (new tab), _parent (parent frame), _top (full window body). |
| rel | Specifies the relationship between the current page and the linked destination. Common values: noopener, noreferrer, nofollow, sponsored, ugc, author, external. |
| download | Instructs the browser to download the linked resource rather than navigating to it. Optional value defines the default suggested filename. |
| title | Provides advisory text, often displayed as a tooltip on hover. |
| hreflang | Specifies the human language of the linked document (e.g. "en", "es", "fr") to assist search engines and translation tools. |
| id | A unique identifier for the element. Used for CSS styling, JavaScript targeting, and anchor links. |
| class | Specifies one or more CSS class names for styling the element. |
| aria-* | A family of ARIA attributes that provide accessibility semantics and states to screen readers. |
| data-* | Custom data attributes to embed custom application data on HTML elements. |
This element also supports global HTML attributes such as class, id, style, data-*, and more.
Common Link Types & URL Schemes
The href attribute supports multiple URL protocols to trigger browser navigation, apps, and device actions:
<a href="https://htmlsave.com" target="_blank" rel="noopener">
Visit HTMLSave
</a>
Standard web page navigation. Add rel="noopener" when opening in new tabs.
<a href="#faq">Jump to FAQ</a>
<!-- Target Element on same page -->
<section id="faq">...</section>
Scrolls directly to any element with a matching id attribute.
<a href="mailto:info@example.com?subject=Inquiry">
Send us an Email
</a>
Launches the user's default email client with recipient and subject pre-filled.
<a href="tel:+18005550199">
Call +1 (800) 555-0199
</a>
Prompts instant phone dialing on mobile phones and desktop calling apps.
CSS Styling & Link States (The LVHA Rule)
To style links correctly without pseudo-classes overriding each other unexpectedly, declare them in the exact LVHA (LoVe/HAte) order:
/* 1. Link (Unvisited) */
a:link {
color: #0d6efd;
text-decoration: underline;
text-underline-offset: 3px;
transition: all 0.2s ease;
}
/* 2. Visited (Style limited to color for privacy) */
a:visited {
color: #6f42c1;
}
/* 3. Hover (Mouse over) */
a:hover {
color: #0a58ca;
text-decoration-thickness: 2px;
}
/* 4. Focus (Keyboard Tab navigation) */
a:focus-visible {
outline: 2px solid #0d6efd;
outline-offset: 3px;
border-radius: 2px;
}
/* 5. Active (Moment of click) */
a:active {
color: #084298;
transform: translateY(1px);
}
Examples
<!-- Internal page link -->
<a href="/about">About Our Company</a>
<!-- External link opening in a new tab securely -->
<a href="https://example.com" target="_blank" rel="noopener noreferrer">
Visit Example Website
</a>
Standard hyperlinks for navigating between pages. Use rel="noopener noreferrer" whenever opening external links in a new tab.
<!-- Email link with pre-filled subject -->
<a href="mailto:support@htmlsave.com?subject=Support%20Request">
Email Support
</a>
<!-- Click-to-call mobile link -->
<a href="tel:+18005550199">
Call Us: +1 (800) 555-0199
</a>
Triggers the user's native email composer or smartphone dialer.
<!-- Navigation Link -->
<a href="#pricing-table">Jump to Pricing</a>
<!-- Target Section on the same page -->
<section id="pricing-table">
<h2>Pricing Plans</h2>
<p>Choose the plan that fits your workflow.</p>
</section>
Jumps directly to any HTML element with a matching id attribute.
<a href="/documents/quarterly-report.pdf" download="Q3-Report.pdf">
Download Financial Report (PDF)
</a>
The download attribute prompts the browser to save the file locally instead of navigating to it.
<a href="/courses/html" class="feature-card">
<article>
<h3>Learn HTML5 From Scratch</h3>
<p>Comprehensive guide covering tags, semantics, and accessibility.</p>
</article>
</a>
<style>
.feature-card {
text-decoration: none;
color: inherit;
display: block;
padding: 1.25rem;
border: 1px solid #e2e8f0;
border-radius: 8px;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.feature-card:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}
</style>
In HTML5, <a> tags can wrap entire cards, images, and paragraphs to create large clickable touch targets.
Notes
The Golden Rule of Web Links: Use an <a> tag whenever you are navigating the user to a new URL, page, or document. Use a <button> tag when triggering an on-page action (like opening a modal or submitting form data).
Security Tip: Whenever using target="_blank" to open external websites, always add rel="noopener noreferrer" to protect your visitors from reverse tabnabbing attacks.
Frequently Asked Questions
Use <a> whenever navigating the user to a new URL, a different page, an external website, or jumping to a page section (#id). Use <button> when triggering an on-page action, such as submitting a form, toggling a modal, opening a dropdown, or running JavaScript.
When a link opens in a new tab with target='_blank', the new page gets access to your original page via the JavaScript window.opener property. A malicious destination site can redirect your background tab to a phishing clone. Adding rel='noopener' blocks this vulnerability completely.
Use the 'mailto:' protocol for emails (e.g. href='mailto:support@example.com') and the 'tel:' protocol for phone calls (e.g. href='tel:+18005550199'). On smartphones and modern devices, clicking these triggers the user's native phone dialer or email client.
Give your target element an ID attribute (e.g. <section id='pricing'>) and set your anchor link's href to match with a hash prefix (<a href='#pricing'>View Pricing</a>). Add 'html { scroll-behavior: smooth; }' in your CSS for a smooth transition.
By default, all links are 'dofollow', meaning search engine crawlers follow them and pass PageRank. Adding rel='nofollow' tells search engines not to endorse the linked site. Use rel='sponsored' specifically for paid advertisements and affiliate links.
Declare your CSS pseudo-classes in the exact LVHA order: :link (unvisited), :visited, :hover, :focus-visible (keyboard), and :active (click). Following this order prevents CSS specificity conflicts.