0
0
HTMLmarkup~5 mins

Anchor tag basics in HTML

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

The anchor tag lets you create links to other pages or places. It helps people move around the web easily.

You want to link from your homepage to an about page.
You want to add a link to an external website.
You want to let users jump to a specific section on the same page.
You want to create a clickable email address link.
You want to link to a downloadable file.
Syntax
HTML
<a href="URL">Link text</a>
The href attribute holds the link address.
The text between <a> and </a> is what users click.
Examples
Links to an external website.
HTML
<a href="https://example.com">Visit Example</a>
Links to a part of the same page with id="section1".
HTML
<a href="#section1">Go to Section 1</a>
Creates a link that opens the user's email program.
HTML
<a href="mailto:someone@example.com">Send Email</a>
Link to download a file named file.pdf.
HTML
<a href="file.pdf" download>Download PDF</a>
Sample Program

This page has three anchor links: one to an external site opening in a new tab, one to jump to a section on the same page, and one to open an email program.

HTML
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Anchor Tag Example</title>
</head>
<body>
  <header>
    <nav>
      <a href="https://www.wikipedia.org" target="_blank" rel="noopener noreferrer">Go to Wikipedia</a>
    </nav>
  </header>
  <main>
    <section id="info">
      <h2>Information Section</h2>
      <p>This is a section you can jump to.</p>
      <a href="#top">Back to top</a>
    </section>
  </main>
  <footer>
    <p>Contact us: <a href="mailto:contact@example.com">contact@example.com</a></p>
  </footer>
</body>
</html>
OutputSuccess
Important Notes

Use target="_blank" to open links in a new tab safely with rel="noopener noreferrer".

Make sure link text clearly describes where the link goes for better accessibility.

Use semantic HTML elements like <nav> for navigation links.

Summary

The anchor tag <a> creates clickable links.

The href attribute sets the link destination.

Links can go to other pages, parts of the same page, emails, or files.