HTML Anchor Tag: Syntax, Usage, and Examples

The HTML anchor tag is one of the most important and widely used elements in web development. It creates hyperlinks that allow users to move from one webpage to another, jump to different sections on the same page, or even trigger actions like opening email clients or downloading files. If you’re building websites, understanding how the anchor tag HTML works is essential.

How to Use the HTML Anchor Tag

The basic syntax for an anchor tag in HTML looks like this:

<a href="https://example.com">Visit Example</a>

Here’s how it works:

• <a> is the anchor tag HTML element.
• href is the most important attribute—it tells the browser where the link goes.
• The text between the opening and closing tags is what users will see and click on.

Absolute vs. Relative URLs

You can use the anchor tag in HTML to link to:

• External pages using absolute URLs:

  Copy Code

  <a href="https://www.google.com">Google</a>
  

• Internal pages using relative paths:

  Copy Code

  <a href="/about.html">About Us</a>
  

• Sections of the same page using id attributes and hash symbols:

  Copy Code

  <a href="#contact">Jump to Contact</a>
  ...
  <section id="contact">Contact us here</section>
  

This flexibility makes the anchor tag HTML incredibly powerful for navigation.

When to Use the Anchor Tag in HTML

You’ll use the anchor tag any time you want a user to move from one place to another—within a page, across your website, or to an entirely different website.

Navigating Between Pages

Use anchor tags for site navigation—menus, sidebars, or anywhere users move between sections.

<a href="/services.html">Our Services</a>
<a href="/contact.html">Contact</a>

Linking to Page Sections

You can create smooth in-page navigation with anchor tags that target specific elements.

<a href="#faq">Go to FAQ</a>
...
<h2 id="faq">Frequently Asked Questions</h2>

This technique works well for single-page websites or long articles.

Downloading Files

Anchor tags can also point to downloadable files:

<a href="/files/report.pdf" download>Download Report</a>

Adding the download attribute tells the browser to download the file instead of opening it in the browser window.

Opening Email Links

You can use mailto: in the href attribute to launch the user’s email client.

<a href="mailto:info@example.com">Email Us</a>

You can even pre-fill subject lines and message bodies:

<a href="mailto:info@example.com?subject=Question&body=Hello!">Send a message</a>

Examples of the Anchor Tag HTML in Action

Let’s look at how anchor tags work in real scenarios.

External Website Link

<a href="https://openai.com">Visit OpenAI</a>

This sends the user to OpenAI’s homepage.

Internal Navigation

<nav>
  <a href="index.html">Home</a>
  <a href="about.html">About</a>
  <a href="contact.html">Contact</a>
</nav>

Anchor tags are the core of your website’s navigation.

Jumping to an Element on the Same Page

<a href="#bio">Read my bio</a>
...
<h3 id="bio">About the Author</h3>

Clicking the link scrolls the page to the heading with the ID "bio."

Anchor Tag in HTML With Example for Downloads

<a href="/docs/guide.pdf" download>Get the Guide</a>

This lets users download a file rather than just view it.

Opening in a New Tab

Use the target="_blank" attribute to open links in a new tab or window:

<a href="https://developer.mozilla.org" target="_blank">MDN Web Docs</a>

Pair this with rel="noopener noreferrer" for security and performance:

<a href="https://developer.mozilla.org" target="_blank" rel="noopener noreferrer">
  MDN Web Docs
</a>

Learn More About Anchor Tag in HTML Attributes

The anchor tag in HTML supports several useful attributes beyond href. Let’s break down a few of the most common ones.

target

Defines where to open the linked document.

• _self (default): Opens in the same tab.
• _blank: Opens in a new tab or window.
• _parent and _top: Used with framesets (rarely used today).

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

title

Adds a tooltip when the user hovers over the link:

<a href="/pricing" title="See our pricing plans">Pricing</a>

This is useful for giving additional context without cluttering the page.

rel

Defines the relationship between the linked document and the current page. Important when using target="_blank" to prevent security issues:

<a href="https://external.com" target="_blank" rel="noopener noreferrer">External Link</a>

id and name

Historically, the name attribute was used to create anchors, but id is the preferred modern approach:

<a id="top"></a>
<a href="#top">Back to top</a>

This enables smooth scrolling within the same page.

Anchor Tag in HTML With Example of Email and Phone

<a href="mailto:hello@example.com">Email Support</a>
<a href="tel:+1234567890">Call Us</a>

This allows users to quickly contact you by email or phone, especially useful on mobile devices.

Styling Anchor Tags with CSS

By default, anchor text appears blue and underlined. You can change that with CSS:

<style>
  a {
    color: #0066cc;
    text-decoration: none;
  }

  a:hover {
    color: #ff6600;
    text-decoration: underline;
  }
</style>

You can also style anchor tags differently based on their state:

• :link – Unvisited links
• :visited – Links the user has visited
• :hover – When the user hovers over the link
• :active – While the link is being clicked

Accessibility and Best Practices

To use the anchor tag HTML effectively, consider the following:

• Use descriptive link text: Avoid vague phrases like “click here.” Instead, use meaningful text like “Download our pricing guide.”
• Avoid nesting block elements inside <a> (unless using HTML5, which allows block-level elements inside anchor tags).
• Always include an href attribute: Without it, the anchor won’t function as a link.
• Don’t use anchor tags just for styling: Use <span> or <div> if you’re not linking anywhere.

SEO Benefits of Anchor Tags

Search engines like Google crawl anchor tags to understand your site’s structure. Internal links help with indexing, and meaningful anchor text improves relevance and keyword targeting.

<a href="/blog/html-anchor-tags">Learn more about HTML anchor tags</a>

This helps both users and search engines understand what the link leads to.

Using the anchor tag in HTML is more than just creating links—it’s about building a structure that connects your content and guides your users. From simple navigation to dynamic email actions, the HTML anchor tag remains one of the most powerful tools in your web development toolkit.

Whether you're using anchor tag HTML for navigation, in-page jumps, or downloads, you now have a solid understanding of how to implement and optimize it effectively.