<a> Anchor (link)
Links to another page, a file, an email address or a point on the same page.
<a> makes a link. The href can be a full URL, a relative path like about.html, an in-page target like #contact, or a scheme such as mailto: or tel:.
Link text should make sense out of context. Read the pricing guide works and click here fails. An a with no href is only a placeholder and cannot receive focus. For actions that go nowhere, use a <button>.
href, target, download and rel are all covered in the a element section of the HTML Living Standard (opens in a new tab). Practise in the Links lesson.
Syntax
<a href="https://example.com/">Link text</a>When to use it
The rule is simple: if activating it loads a new URL or a resource, it is a link, and it gets an <a>. That covers another page, a section further down the same page, a file to download, a phone number on a mobile site and an email address. People open links in new tabs, bookmark them and share them. App-like interfaces need real links for exactly that reason.
area is only for clickable regions of an image map. The link element in the head loads stylesheets and icons and is not a visible link at all.
Wrapping a whole card (image, heading, text) in one a has a cost. The entire card text becomes the link name, so a screen reader reads a long run-on sentence for every card, and the text gets hard to select. Link the card heading and leave the rest as normal text.
Attributes
| Attribute | What it does |
|---|---|
href | The destination URL, path, #id, mailto: or tel: link. |
target | Where to open it. _blank opens a new tab or window. |
download | Download the file instead of opening it; the value can set a file name. |
rel | Relationship, such as noopener, nofollow, external or me. |
hreflang | Language of the linked page. |
type | MIME type of the linked file, as a hint. |
referrerpolicy | How much referrer information to send. |
Live example
Edit the code and watch the preview.
<p><a href="https://developer.mozilla.org/">MDN Web Docs</a></p>
<p><a href="about.html">About us</a> (relative path)</p>
<p><a href="#bottom">Jump to the bottom</a></p>
<p><a href="mailto:[email protected]">Email us</a></p>
<p id="bottom">The bottom of the page.</p>More examples
Download and phone links
download suggests a file name and asks the browser to save the file, not open it. A tel: link lets a phone start a call. Give the file type and size so people can decide before they click.
<p><a href="hello.html" download="sample-page.html">Download the sample page</a> (HTML, 1 KB)</p>
<p>Call us: <a href="tel:+15551234567">+1 555 123 4567</a></p>Card with a linked heading
Only the card's heading is a link, which keeps the accessible name short. The image is decorative and has empty alt text. The heading already says what the card is about.
<article>
<img src="dog.svg" alt="" width="200" height="150">
<h3><a href="/adopt/rex/">Adopt Rex</a></h3>
<p>Five years old, calm with children and loves long walks.</p>
</article>Tip: Describe where the link goes. 'Click here' tells nobody anything.
Browser support
Every browser supports a. All current browsers handle the download attribute, though only for same-origin, blob: and data: URLs (the download attribute support table (opens in a new tab) has versions). Current browsers also treat target="_blank" as though rel="noopener" were set.
Accessibility
Link text has to make sense on its own (WCAG 2.4.4). Links should stand out from body text by something besides color (WCAG 1.4.1), and users should be told when a link opens a new tab. For examples of good link text, see the W3C note Understanding Link Purpose (In Context) (opens in a new tab).
Common mistakes
Wrong
<a href="report.pdf">Click here</a>Right
<a href="report.pdf">Download the 2026 annual report (PDF, 2 MB)</a>Out of context, click here says nothing. The text should name the destination.
Wrong
<a onclick="openMenu()">Menu</a>Right
<button type="button" onclick="openMenu()">Menu</button>Without href an a cannot get focus. Actions belong on a button.
Frequently asked questions
How do I open a link in a new tab?
Add target="_blank": <a href="https://example.com" target="_blank">. Modern browsers apply rel="noopener" to _blank links automatically, which stops the new page from controlling yours, and writing it out yourself does no harm. Do tell users that the link opens a new tab. Surprise windows confuse people, screen reader users most of all. The New Tabs and Page Jumps lesson shows target in use.
Should I use a link or a button?
It depends on what happens when it is activated. If it takes the user to another page, a file or a spot on the page, use <a href>. If it does something, like submitting a form, opening a dialog or toggling a menu, use <button>. Links respond to Enter, buttons to Enter or Space, and assistive technology announces the two differently. The W3C link pattern (opens in a new tab) describes the keyboard behaviour people expect from a link.
Practise it
- Links (Module 3: Links and Media)
- Relative and Absolute Paths (Module 3: Links and Media)
- New Tabs and Page Jumps (Module 3: Links and Media)
- Project: Travel Postcard (Module 3: Links and Media)
- Header, Nav, Main, Footer (Module 4: Structure and Semantics)
- Fix the Div Soup (Module 4: Structure and Semantics)