HTML Reference
<a> — The Anchor Element
The tag that made the web a web. Creates hyperlinks to pages, files, and locations.
Last updated: October 2026
Definition: The <a> element (anchor) defines a hyperlink — the core of the World Wide Web. It can link to external pages, internal routes, files, email addresses, phone numbers, or specific locations inside a page.
🎬 Live Example
Every link below uses only HTML attributes — no JavaScript.
💡 The same element handles every kind of link. Behavior is controlled by the href attribute.
Basic Syntax
<a href="destination">Link text</a>The href attribute is the only required attribute.
⚙️ Attributes Reference
| Attribute | Value | Purpose |
|---|---|---|
href | URL | The destination. Required. |
target | _self, _blank, _parent, _top | Where to open the link. |
rel | noopener, noreferrer, nofollow, sponsored | Relationship to destination. |
download | filename (optional) | Download instead of navigating. |
hreflang | language code | Language of the linked resource. |
title | text | Tooltip text on hover. |
referrerpolicy | no-referrer, etc. | Referrer info to send. |
Basic External Link
Always add rel="noopener noreferrer" when using target="_blank".
<a href="https://example.com" target="_blank" rel="noopener noreferrer">
Visit Example
</a>Internal Link (Relative Path)
Links to another page on the same site.
<!-- Relative -->
<a href="./about.html">About Us</a>
<!-- Root-relative -->
<a href="/courses/python/">Python Course</a>Fragment Link (Jump to Section)
Links to a specific element on the same page or another page.
<!-- Link to a section on this page -->
<a href="#attributes">Jump to Attributes</a>
<!-- The target -->
<h2 id="attributes">Attributes</h2>
<!-- Link to a section on another page -->
<a href="/docs/api.html#authentication">API Auth</a>Email and Phone Links
Opens the user's email client or phone dialer. No JavaScript required.
<!-- Email with subject and body -->
<a href="mailto:hello@example.com?subject=Hello&body=Hi there">
Send Email
</a>
<!-- Phone (uses device dialer on mobile) -->
<a href="tel:+15551234567">Call Us</a>
<!-- SMS -->
<a href="sms:+15551234567">Send Text</a>Downloadable Files
The download attribute tells the browser to download instead of navigate.
<!-- Downloads the file -->
<a href="/files/guide.pdf" download>Download PDF</a>
<!-- Downloads and renames the file -->
<a href="/files/guide.pdf" download="html-guide.pdf">
Download HTML Guide
</a>💡 Note: download only works for same-origin URLs. Cross-origin downloads are blocked by browsers.
SEO Attributes — rel="nofollow" and rel="sponsored"
Tell search engines how to treat the link.
<!-- Don't pass SEO value to this link -->
<a href="https://unknown-site.com" rel="nofollow">
Unverified Site
</a>
<!-- This is a paid or sponsored link -->
<a href="https://advertiser.com" rel="sponsored">
Sponsored Link
</a>
<!-- Multiple values are allowed -->
<a href="https://example.com" rel="noopener noreferrer nofollow">
External Link
</a>🎯 Attribute Values Cheatsheet
| target value | Behavior |
|---|---|
_self | Same tab (default). |
_blank | New tab or window. |
_parent | Parent frame. |
_top | Topmost frame. |
| rel value | Meaning |
|---|---|
noopener | Prevents window.opener access. |
noreferrer | No referrer header. Implies noopener. |
nofollow | Don't pass SEO link juice. |
sponsored | Paid/sponsored link. |
ugc | User-generated content. |
🎯 Anchor Target Section
You landed here because the "Jump to section" link at the top uses href="#example-anchor", which matched this section's id="example-anchor".
⚠️ Common Mistakes
- Using
target="_blank"withoutrel="noopener". Security hole — the linked page can redirect your original tab. - Using "click here" as link text. Bad for SEO and accessibility. Screen readers announce link text out of context.
- Nesting interactive elements inside
<a>. Breaks keyboard navigation and produces invalid HTML. - Using
javascript:void(0). Use a<button>instead. Anchors are for navigation. - Missing
href. Without it, the anchor isn't keyboard focusable. - Forgetting that
downloadrequires same-origin. Cross-origin downloads are blocked.
♿ Accessibility Notes
- Every anchor should have descriptive link text. Avoid "click here" or "read more."
- If the link text alone isn't descriptive (icon-only links), add
aria-label. - Anchors are focusable by default. Never remove the focus outline without a visible alternative.
- Use
<a>for navigation only. Use<button>for actions. - For links that open in a new tab, consider adding a visual indicator or
aria-labelmentioning "opens in a new tab."
❓ Frequently Asked Questions
What is the HTML <a> tag?
The <a> tag (anchor element) creates hyperlinks to other pages, files, locations within the same page, or any other URL. It is the defining feature of the World Wide Web.
What does the href attribute do?
The href attribute specifies the destination of the link. It can be a URL, an email address (mailto:), a phone number (tel:), a file download, or a fragment identifier (#section).
What is the difference between target="_blank" and target="_self"?
target="_blank" opens the link in a new tab or window. target="_self" opens it in the same tab (default). Always pair _blank with rel="noopener noreferrer" for security.
What does rel="noopener" do?
rel="noopener" prevents the new page from accessing the window.opener property of your page. This closes a security hole where the linked page could redirect your original tab to a phishing site.
How do I make an email link in HTML?
Use href="mailto:email@example.com". This opens the user's default email client with the address pre-filled. You can add subject and body with query parameters: mailto:email@example.com?subject=Hello&body=Hi