What is the use of the tag?

Direct answer Use when the user is navigating to another URL, document, or fragment target. In production, the common mistake is treating anchors and buttons as interchangeable: preserves link semantics, open-in-new-tab behavior, browser history, and SEO, while is for in-page actions. Security and accessibility essentials Use descriptive text like Read pricing details , not Click here . When using target="_blank" , add rel="noopener noreferrer" . Use for navigation and for in-page actions. Practical scenario In a dashboard sidebar, each menu item should be an anchor to support navigation semantics, open-in-new-tab…

What is the use of the <a> tag?

HighEasyHtml

By FrontendAtlas Team · Updated Apr 4, 2026

Quick Answer

The <a> (anchor) tag is the browser's real navigation primitive: it gives links semantics, accessibility, and SEO behavior, and it avoids common button-vs-link pitfalls in production UIs.

Answer

Direct answer

Use <a> when the user is navigating to another URL, document, or fragment target. In production, the common mistake is treating anchors and buttons as interchangeable: <a> preserves link semantics, open-in-new-tab behavior, browser history, and SEO, while <button> is for in-page actions.

HTML

<a href="/pricing">See pricing</a>

Use case	Example
Internal page	`<a href="/about">About</a>`
External site	`<a href="https://developer.mozilla.org">MDN</a>`
Same-page section	`<a href="#faq">Jump to FAQ</a>`
Email link	`<a href="mailto:team@example.com">Email us</a>`
Phone link	`<a href="tel:+15551234567">Call support</a>`
Download	`<a href="/docs/guide.pdf" download>Download guide</a>`

One tag, many navigation patterns.

Security and accessibility essentials

HTML

<a href="https://example.com" target="_blank" rel="noopener noreferrer">
  Open docs in new tab
</a>

Use descriptive text like Read pricing details, not Click here.
When using target="_blank", add rel="noopener noreferrer".
Use <a> for navigation and <button> for in-page actions.

Practical scenario
In a dashboard sidebar, each menu item should be an anchor to support navigation semantics, open-in-new-tab behavior, and browser history correctly.

Common pitfalls

Using fake links (href="#") for button-like actions.
Missing rel with target="_blank".
Non-descriptive labels that hurt screen reader users.

Still so complicated?

<a> is a route sign. href is the destination address. No address means no navigation.

Summary

<a> is for navigation.
href defines destination.
Good link text and secure new-tab usage make links professional and accessible.