ReferenceStandard

The a element: links with a clear destination

An a element with href is a hyperlink.

Intermediate3 min readLearn · Practice · Review

Published by HTML Code Runner · AI-assisted material · Independent editorial review pending · Editorial policy

On this page

Purpose and content model

An a element with href is a hyperlink. Its content provides the link's accessible name and visible label; its URL defines the navigation destination. Without href it is not an ordinary navigable link. Use a button when the intended behavior is an action in the current interface, such as opening a dialog or toggling a setting.

The anchor has a transparent content model, subject to restrictions inherited from its context. In particular, avoid nested anchors and interactive descendants such as buttons. A card-sized link can contain meaningful noninteractive content, but a card with several independent actions needs a different structure.

Syntax and working example

<p><a href="/membership/">Read the membership requirements</a></p>
<a href="#renewals">Jump to renewals</a>
<h2 id="renewals">Renewals</h2>

Supported attributes and behavior

Href accepts absolute, relative, and fragment URLs. Target chooses a browsing context; rel expresses relationships such as noopener, noreferrer, external, or nofollow where appropriate. Download suggests saving a resource and an optional filename, with cross-origin limitations. Hreflang and type provide advisory metadata. Referrerpolicy controls referrer information for the navigation; ping can send link-auditing requests and should not be enabled casually.

Another practical pattern

<a href="/files/reading-list.pdf" download="reading-list.pdf">Download the reading list (PDF)</a>
<a href="https://example.org/" target="_blank" rel="noopener">Partner catalogue (opens a new tab)</a>

Accessibility and browser notes

Make the destination understandable from the link text and relevant context. Preserve visible focus and distinguish links in prose with more than color alone. Avoid unnecessarily opening new tabs. Explicit noopener documents isolation even though modern target=_blank handling commonly provides it implicitly.

Common mistakes

Href=# is not a suitable substitute for a button. A link that says Download should actually offer a downloadable resource. Noreferrer suppresses referrer information; it is not merely another spelling of noopener. Relative URLs depend on the document's base URL.

Verify your implementation

Tab to the link and activate it with Enter. Open it in another tab using browser controls, copy its address, and verify the target independently. Test fragment links with a sticky header and confirm the target ID is unique in the document.

Standard status and sources

Standard; browser availability must be checked independently of specification status.

HTML specification · MDN reference and compatibility data