<a>

The HTML <a> element (also called the anchor element) is used to create hyperlinks, the fundamental way to navigate between web pages and resources on the web.

Using the href attribute you can link to other pages, files, email addresses, or internal links to sections of a page.

Syntax

<a href="URL">Link text</a>

Common attributes

• href: The URL or path to link to (Required for a link).
• target: Where to open the linked document:
  • _self: Opens the link in the same browser tab/frame (default).
  • _blank: Opens in a new browser tab or window.
  • _parent: Link target is opened in the parent frame if nested.
  • _top: Opens as the top/outermost frame.
• rel: Specifies the relationship between the current document and the linked one (e.g. noopener, prefetch, nofollow).
• download: When clicked on the target will be downloaded..

The target attribute can be a little confusing in modern context. Nesting content inside of the <frame> or <frameset> elements used to be more common and therefore we set the link destination based on the current frame.

Basic usage

<a href="url">Link text</a>

Or nested within text:

<p>Visit our <a href="https://learn-webdevelopment.com">website</a> for all available courses.</p>

Opening links in a new tab

<a href="https://learn-webdevelopment.com/reference/html/elements/a" target="_blank" rel="noopener">Open in a new tab</a>

Always use rel="noopener" or rel="noreferrer" with target="_blank" for security and performance. This prevents the new page accessing the previous page via window.opener.

Linking to email or phone

<a href="mailto:mail@mailbox.com">Contact us via email</a>
<a href="tel:+1234567890">Call us</a>

Linking to a section on the same page

Internal links can be created to link to sections of a page using the id. This is useful for a table of contents, of linking a reference to a more detailed section on the page:

<a href="#contact">Contact us form</a>
...
<section id="contact">Get in touch today</section>

File download

<a href="/files/starter-guide.pdf" download>Download our free starter guide</a>

Accessibility and best practices

• Avoid using <a> without the href for buttons; use <button> instead.
• Use clear, descriptive link text to describe the destination of the link (avoid "click here" etc).
• Ensure links are visually distinct (color, underline).
• Use aria-label for extra context if needed.

Conclusion

The <a> element is a fundamental part of web pages, and essential for web navigation. Use it to create accessible, meaningful links that help users navigate your site and the web.