Master the HTML <a> element to create functional, accessible links that navigate users or trigger downloads.
What it is
The anchor element (<a>) defines a hyperlink. It connects one document to another, either within the same site or across the web. The core mental model is "linking resources." Key attributes include href (the destination URL), target (where to open the link), and rel (relationship between documents). Related terms include "URI" (Uniform Resource Identifier) and "navigation."
Why it matters
- Navigation: It is the primary mechanism for moving between pages on the web.
- Accessibility: Screen readers rely on proper anchor usage to announce links clearly.
- SEO: Search engines use anchors to crawl and index content effectively.
- User Experience: Correctly configured links prevent broken navigation and unexpected window behavior.
Syntax or steps
The basic syntax requires an opening tag with an href attribute, text content, and a closing tag. For security when using target="_blank", always add rel="noopener noreferrer".
Example
<!-- Basic internal link -->
<a href="/about.html">About Us</a>
<!-- External link opening in new tab securely -->
<a href="https://example.com" target="_blank" rel="noopener noreferrer">Visit Example</a>
<!-- Downloadable file -->
<a href="/files/report.pdf" download>Download Report</a>In the first line, clicking "About Us" navigates to /about.html. In the second, the link opens in a new tab while preventing the opened page from accessing the original window object via JavaScript (security best practice). The third triggers a browser download prompt for the PDF.
Common mistakes
- Missing
rel="noopener": Usingtarget="_blank"without this exposes your site to potential security risks where the new page can manipulate the original. - Vague link text: Using "Click here" instead of descriptive text like "Read our privacy policy" harms accessibility and SEO.
- Broken
hrefvalues: Leavinghrefempty or using#incorrectly can cause unexpected scrolling or reloads. - Ignoring relative paths: Hardcoding full URLs for internal links makes sites harder to move between environments (e.g., staging to production).
When to use it
Use <a> for navigation and resource linking. Do not use it for actions that do not change the URL (like submitting forms or toggling UI states); use <button> instead.
| Element | Primary Use | Behavior |
|---|---|---|
<a> |
Navigating to a URL | Changes location or downloads file |
<button> |
Triggering JavaScript actions | Submits form or runs script |
Practice
Guided Exercise: Create a link to "https://developer.mozilla.org" that opens in a new tab securely. Ensure the link text is descriptive.
Challenge: Add a link to a local image file named "logo.png" that forces a download rather than displaying it in the browser.
Hint: Remember the download attribute for the challenge.
Quick check
Question: Why is rel="noopener" recommended when using target="_blank"?
Answer: It prevents the newly opened page from gaining access to the original page's window object, mitigating security vulnerabilities like tabnabbing.
Summary
The <a> element is fundamental for web navigation. Always prioritize descriptive text and secure attributes like rel="noopener" when opening new tabs to ensure both usability and safety.