HTML <a> Tag From 0 to Infinity

0. What is the <a> Tag?

The <a> tag is called the anchor tag. It is used to create a hyperlink.

A hyperlink can take the user to:

• another website,
• another page of the same website,
• a section on the same page,
• an email application,
• a phone dialer,
• a downloadable file,
• or another resource.

Basic syntax

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

1. The Simplest Link

The most important attribute of the anchor tag is href. It tells the browser where the link should go.

<a href="https://www.learnwithchampak.live">
  Learn With Champak
</a>

Important parts

2. Understanding href

The href attribute is the heart of the anchor tag. Without href, the anchor may look like text but it does not behave like a real link.

Example with full web address

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

Example with same-site page

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

Example with folder page

<a href="lessons/html/index.html">HTML Lesson</a>

3. Internal Page Links

You can link to a section on the same page by using an id.

Step 1: Give an element an id

<section id="contact">
  <h2>Contact Us</h2>
</section>

Step 2: Link to that id

<a href="#contact">Go to Contact Section</a>

4. External Links

External links take users to another website.

<a href="https://www.wikipedia.org">
  Visit Wikipedia
</a>

External links are useful, but do not send students away from your site unnecessarily. Use them when they add learning value.

5. Opening Links in a New Tab

Use target="_blank" to open a link in a new tab.

<a href="https://www.learnwithchampak.live" target="_blank">
  Open in New Tab
</a>

Security improvement

When using target="_blank", also use rel="noopener noreferrer".

<a 
  href="https://www.learnwithchampak.live"
  target="_blank"
  rel="noopener noreferrer">
  Safe New Tab Link
</a>

6. Special Types of Links

6.1 Email link

Use mailto: to open the user’s email application.

<a href="mailto:teacher@example.com">
  Email the Teacher
</a>

6.2 Email with subject

<a href="mailto:teacher@example.com?subject=HTML Doubt">
  Send HTML Doubt
</a>

6.3 Phone link

Use tel: to open the phone dialer on supported devices.

<a href="tel:+919335874326">
  Call Now
</a>

6.4 WhatsApp link

<a href="https://wa.me/919335874326">
  Message on WhatsApp
</a>

7. Download Links

The download attribute tells the browser to download the file instead of opening it.

<a href="notes/html-a-tag.pdf" download>
  Download Notes
</a>

Download with a custom file name

<a href="notes/html-a-tag.pdf" download="anchor-tag-notes.pdf">
  Download Anchor Tag Notes
</a>

8. Accessibility: Make Links Clear for Everyone

Accessibility means making the page usable for all users, including people using screen readers, keyboards, mobile devices, and TV remotes.

Bad link text

<a href="lesson.html">Click here</a>

“Click here” does not explain where the link goes.

Good link text

<a href="lesson.html">Read the HTML Anchor Tag Lesson</a>

Keyboard focus

A user should be able to press the Tab key and clearly see which link is selected. This page uses a visible focus outline for that reason.

9. Anchor Tags and SEO

SEO means Search Engine Optimization. Search engines use links to understand pages, relationships, and importance.

Good SEO link

<a href="/html/forms/">
  Learn HTML Forms
</a>

Weak SEO link

<a href="/html/forms/">
  Click here
</a>

Use descriptive anchor text

Instead of this:

To learn forms, <a href="/html/forms/">click here</a>.

Write this:

Read our <a href="/html/forms/">complete HTML forms lesson</a>.

Use rel="nofollow" when needed

If a link is sponsored, paid, or user-generated, use proper rel values.

<a href="https://example.com" rel="sponsored">
  Sponsored Link
</a>

<a href="https://example.com" rel="nofollow">
  Untrusted External Link
</a>

10. Common Mistakes

11. Mini Project: Student Resource Card

Now we will create a small resource card using different types of anchor tags.

<div class="student-card">
  <h2>HTML Learning Resources</h2>

  <p>
    Start with the 
    <a href="https://www.learnwithchampak.live">
      Learn With Champak homepage
    </a>.
  </p>

  <p>
    Read the 
    <a href="/html/index.html">
      HTML lesson index
    </a>.
  </p>

  <p>
    <a href="notes/html-basics.pdf" download>
      Download HTML notes
    </a>
  </p>

  <p>
    <a href="mailto:teacher@example.com?subject=HTML Question">
      Ask a question by email
    </a>
  </p>
</div>

12. Practice Questions

1. Create a link to your homepage.
2. Create a link that opens Google in a new tab.
3. Create a link that jumps to the contact section of the same page.
4. Create an email link with subject “Website Doubt”.
5. Create a download link for a file named notes.pdf.
6. Write one good anchor text and one bad anchor text.

Answers

<a href="index.html">Home</a>

<a href="https://www.google.com" target="_blank" rel="noopener noreferrer">
  Open Google
</a>

<a href="#contact">Go to Contact Section</a>

<a href="mailto:teacher@example.com?subject=Website Doubt">
  Email Website Doubt
</a>

<a href="notes.pdf" download>Download Notes</a>

Bad: <a href="html.html">Click here</a>

Good: <a href="html.html">Read the HTML beginner lesson</a>

13. Final Summary

• The <a> tag creates links.
• The href attribute gives the destination.
• Use #id for same-page section links.
• Use target="_blank" carefully.
• Use rel="noopener noreferrer" with new-tab external links.
• Use meaningful link text for accessibility and SEO.
• Use mailto:, tel:, and download for special links.

Support This Lesson

This space can show a Google ad when the page is published.