Anchor Tags

Difficulty: Beginner

The anchor element (<a>) is the backbone of the web. It creates hyperlinks that connect one page to another, link to files, email addresses, phone numbers, or any URL. Without anchor tags, the World Wide Web would be a collection of isolated documents with no way to navigate between them. Every time you click a link on a webpage, you are interacting with an anchor element.

The most important attribute of the anchor tag is href (Hypertext Reference). This attribute specifies the destination URL that the browser should navigate to when the link is clicked. The href value can be an absolute URL (like https://example.com), a relative path (like /about.html), a fragment identifier (like #section), a mailto link (like mailto:user@example.com), or a tel link (like tel:+1234567890). If you omit the href attribute entirely, the element behaves like a placeholder and is not clickable.

The target attribute controls where the linked document opens. The most common values are _self (default, opens in the same tab), _blank (opens in a new tab or window), _parent (opens in the parent frame), and _top (opens in the full body of the window). When using target="_blank", you should always pair it with rel="noopener noreferrer" for security reasons. Without this, the opened page can access the window.opener property and potentially redirect your page to a malicious URL.

The rel attribute specifies the relationship between the current page and the linked resource. Common values include noopener (prevents the new page from accessing window.opener), noreferrer (prevents sending the Referer header), nofollow (tells search engines not to follow this link), and external (indicates the link leads to an external site). Multiple rel values can be combined with spaces.

The download attribute tells the browser to download the linked resource instead of navigating to it. When present without a value, the browser uses the filename from the URL. You can also specify a custom filename as the attribute value, like download="report.pdf". This attribute only works for same-origin URLs or blob: and data: URLs for security reasons.

Code examples

Basic Anchor Tag Usage

<!-- Basic link -->
<a href="https://www.example.com">Visit Example</a>

<!-- Email link -->
<a href="mailto:contact@example.com">Send Email</a>

<!-- Phone link -->
<a href="tel:+1234567890">Call Us</a>

<!-- Link with no destination (placeholder) -->
<a>Coming Soon</a>

The href attribute accepts different URL schemes. Regular URLs navigate to pages, mailto: opens the default email client, and tel: initiates a phone call on mobile devices. Omitting href creates a non-clickable placeholder.

Target and Rel Attributes

<!-- Opens in same tab (default behavior) -->
<a href="/about" target="_self">About Us</a>

<!-- Opens in new tab - ALWAYS use rel for security -->
<a href="https://external-site.com" 
   target="_blank" 
   rel="noopener noreferrer">
  External Resource
</a>

<!-- SEO: Tell search engines not to follow -->
<a href="https://user-submitted-link.com" 
   rel="nofollow">
  User Submitted Link
</a>

When opening links in new tabs with target='_blank', always add rel='noopener noreferrer'. Without noopener, the destination page gains access to your page's window.opener object, which is a security vulnerability known as reverse tabnapping.

Download Attribute

<!-- Download with original filename -->
<a href="/files/annual-report.pdf" download>
  Download Report
</a>

<!-- Download with custom filename -->
<a href="/files/report-2024-q4.pdf" 
   download="Annual-Report.pdf">
  Download Annual Report
</a>

<!-- Download an image -->
<a href="/images/logo.png" download="company-logo.png">
  Download Logo
</a>

The download attribute instructs the browser to save the file rather than navigating to it. You can optionally provide a filename that will be suggested to the user. Note that this only works for same-origin URLs due to browser security restrictions.

Accessible Link Practices

<!-- Bad: Non-descriptive link text -->
<a href="/report">Click here</a>

<!-- Good: Descriptive link text -->
<a href="/report">View the 2024 Annual Report</a>

<!-- Link with title for additional context -->
<a href="/docs/api" 
   title="Opens the full API documentation">
  API Documentation
</a>

<!-- Image as a link -->
<a href="/">
  <img src="logo.png" alt="Company Home Page">
</a>

Screen readers often read links out of context (e.g., listing all links on a page). Using descriptive text like 'View the 2024 Annual Report' is far more useful than 'Click here' or 'Read more'. When using images as links, the img alt text serves as the link text for assistive technologies.

Key points

Always use rel='noopener noreferrer' when using target='_blank'. Modern browsers automatically imply noopener for target='_blank', but including it explicitly ensures backward compatibility.
Link text should describe the destination, not the action. Avoid generic text like 'Click here' or 'Read more' -- screen readers list all links out of context.
The download attribute only works for same-origin URLs. Cross-origin downloads will be navigated to instead of downloaded unless the server sends appropriate CORS headers.

Concepts covered

a Element, href Attribute, target Attribute, rel Attribute, download Attribute