The HTML <a> tag
The HTML <a> tag, or anchor element, defines a hyperlink. Its href attribute sets the destination — a web page, file, email address (mailto:), phone number (tel:), or a section within the current page (#id).
Overview
The <a> tag — short for anchor — is the element that turns the web into a web. It creates a hyperlink from one resource to another, and it is one of the oldest and most important elements in HTML.
The destination of the link is set with the href (hypertext reference) attribute. Beyond linking to other pages, an anchor can point to a downloadable file, scroll to a section on the same page using a fragment such as #section, open the user's email client with mailto:, or start a phone call with tel:.
An <a> element is inline by default and its text content becomes the clickable link text. That text is read aloud by screen readers and used by search engines to understand the destination, so writing clear, descriptive anchor text is one of the highest-impact things you can do for both accessibility and SEO.
Syntax
<!-- Basic link to another page -->
<a href="https://example.com">Visit Example</a>
<!-- Open in a new tab, safely -->
<a href="https://example.com" target="_blank" rel="noopener noreferrer">Visit Example</a>
<!-- Jump to a section on the same page -->
<a href="#pricing">See pricing</a>
<!-- Email and phone links -->
<a href="mailto:hello@example.com">Email us</a>
<a href="tel:+15551234567">Call us</a>
<!-- Prompt a file download -->
<a href="/files/report.pdf" download>Download the report (PDF)</a>Attributes
The <a> element supports the following attributes, in addition to the global attributes available to every HTML element.
| Attribute | Value | Description |
|---|---|---|
download |
Empty (use the resource's name) — or a string giving a suggested filename. | Prompts the browser to download the linked file. |
href |
A URL — absolute, relative, or a special scheme such as mailto:, tel: or a #fragment. |
Specifies the URL a hyperlink points to. |
hreflang |
A BCP 47 language tag, e.g. en, fr, pt-BR. |
States the language of the linked document. |
ping |
A space-separated list of URLs. | Pings URLs when the link is clicked. |
rel |
A space-separated list of link types, e.g. nofollow, noopener, noreferrer, stylesheet, preload, canonical, icon, sponsored, ugc. |
Defines the relationship to the linked resource. |
target |
_self (default) _blank _parent _top a named browsing context |
Specifies where to open a link or form result. |
type |
A MIME type such as text/css or image/webp — or module on a <script>. |
Specifies the MIME type of a resource. |
Example
<a href="https://codeshack.io/">Visit CodeShack</a>More Examples
Best practices
- Write descriptive link text that makes sense on its own — avoid "click here" or "read more". Clear anchor text helps screen-reader users and tells search engines what the destination is about.
- When using
target="_blank", always addrel="noopener noreferrer"to stop the new tab from hijacking your page throughwindow.opener. - Mark paid, affiliate or user-submitted links with
rel="sponsored",rel="nofollow"orrel="ugc"to follow search-engine guidelines. - Use relative URLs for internal links and absolute
https://URLs for external ones. - Never wrap a block-level or other interactive element (such as a
<button>) inside an<a>— it produces invalid, inaccessible markup. - Keep a visible focus outline and sufficient color contrast so links are usable with a keyboard and readable for everyone.
Accessibility
An <a> with an href is automatically keyboard-focusable and is announced as a "link" by assistive technology. To keep your links accessible:
- Make the link text meaningful out of context. Screen-reader users often pull up a list of every link on a page, so "Download the 2026 pricing guide (PDF)" is far better than "download".
- If the visible text cannot be descriptive (for example an icon link), add an
aria-labelor visually-hidden text. - Do not use an empty
<a>(one with nohref) as a button — use a <button> element so it is focusable and exposes the correct role. - When a link opens in a new tab, let users know with an icon or "(opens in a new tab)" text.
- Never remove the focus outline without providing a clearly visible replacement.
Frequently asked questions
What is the HTML <a> tag used for?
<a> tag creates a hyperlink. Using its href attribute it can link to another web page, a file, an email address (mailto:), a phone number (tel:), or a specific section of the current page (#id).How do I open a link in a new tab?
target="_blank". For security and performance you should also add rel="noopener noreferrer" so the newly opened page cannot access your window through window.opener.How do I link to a section on the same page?
id and link to it with a hash. For example, <a href="#pricing">Pricing</a> jumps to the element with id="pricing".How do I create an email or phone link?
mailto: scheme for email — <a href="mailto:hi@example.com"> — and the tel: scheme for phone numbers — <a href="tel:+15551234567">.How do I make a link download a file?
download attribute. <a href="/report.pdf" download> tells the browser to save the file instead of navigating to it. You can pass a value, like download="2026-report.pdf", to suggest a filename.Is the href attribute required on the <a> tag?
<a> without href is only a placeholder — it is not keyboard focusable and is not exposed as a link. If you need a clickable control that does not navigate, use a <button> instead.What is the difference between rel="nofollow", "sponsored" and "ugc"?
rel values tell search engines how to treat a link: nofollow means do not pass ranking signals, sponsored marks paid or affiliate links, and ugc marks user-generated content such as comments and forum posts.How do I make an image a link?
How do I create a link to a phone number or email?
tel: and mailto: schemes — <a href="tel:+15551234567">Call</a> for a phone number and <a href="mailto:hi@example.com">Email</a> for an email address.