Path // www.yourhtmlsource.com → Reference → <a>

<a>

The <a> element (anchor) creates a hyperlink to other web pages, files, locations within the same page, email addresses, or any other URL. It is one of the most fundamental elements in HTML, enabling the interconnected nature of the World Wide Web. The content inside an anchor element becomes clickable, allowing users to navigate to the specified destination.

This page was last updated on 2025-11-17

Syntax

The element requires both opening and closing tags. The content between the tags becomes the clickable link text, which can include text, images, or other inline elements.

Key Attributes

href — The URL or destination the link points to. Can be absolute URLs, relative paths, fragment identifiers (#), or special protocols like mailto: or tel:.
target — Specifies where to open the linked document. Common values:
- _self — Opens in the same frame (default)
- _blank — Opens in a new tab or window
- _parent — Opens in the parent frame
- _top — Opens in the full body of the window
rel — Defines the relationship between the current document and the linked document. Important values:
- noopener — Prevents the new page from accessing the window.opener property (security)
- noreferrer — Prevents passing the referrer information to the target
- nofollow — Indicates the link should not be followed by search engines
- external — Indicates the link points to an external site
download — Instructs the browser to download the linked resource rather than navigate to it. Can optionally specify a filename.
hreflang — Specifies the language of the linked document.
type — Specifies the MIME type of the linked document.
title — Provides additional information about the link, often displayed as a tooltip.
Global attributes — Supports all global attributes including id, class, style, tabindex, and ARIA attributes.

Security Considerations

Important: When using target="_blank" to open links in new tabs, always include rel="noopener" (or rel="noopener noreferrer") for security reasons.

Without noopener, the newly opened page gains access to your page via the window.opener object, which could allow malicious sites to:

Redirect your original page to a phishing site
Execute JavaScript in your page’s context
Access sensitive information

<a href="https://example.com" target="_blank" rel="noopener noreferrer">External Site</a>

Modern browsers (Chrome 88+, Firefox 79+, Safari 12.1+) automatically apply noopener behavior to target="_blank" links, but explicitly including it ensures compatibility with older browsers.

Examples

Basic Hyperlink

<a href="https://www.example.com">Visit Example</a>

Link to Email Address

<a href="mailto:contact@example.com">Send us an email</a>

Link to Phone Number

Link to Section on Same Page

<a href="#contact">Jump to Contact Section</a>


<h2 id="contact">Contact Us</h2>

External Link Opening in New Tab (Secure)

<a href="https://www.external-site.com" target="_blank" rel="noopener noreferrer">External Resource</a>

Download Link

<a href="/files/report.pdf" download>Download Report</a>


<a href="/files/report.pdf" download="annual-report-2024.pdf">Download Annual Report</a>

Image as Link

When to Use

Use the <a> element when:

Creating navigation between pages or sections of your website
Linking to external resources or references
Providing downloadable files
Creating email or telephone links
Building navigation menus
Linking to specific sections within long documents

Accessibility Best Practices:

Use descriptive link text that makes sense out of context (avoid “click here” or “read more”)
Don’t rely solely on color to distinguish links from regular text
Ensure sufficient color contrast for link text
Consider indicating when links open in new windows or download files
Make sure links are keyboard accessible (they are by default)

SEO Considerations: