HTML Anchor Tag (a): A Complete Guide for Beginners

Introduction: Why the HTML Anchor Tag Is Important

The web is called the World Wide Web because pages are connected through links.
These links are created using the HTML anchor tag.

The anchor tag allows users to:

  • Navigate between pages

  • Open external websites

  • Jump to sections on the same page

  • Download files

  • Send emails or make phone calls

Without the anchor tag, websites would be isolated pages, not a connected web.

What Is the HTML Anchor Tag?

The HTML anchor tag (<a>) is used to create hyperlinks.

 In simple words:
The <a> tag makes text or images clickable and links them to another resource.

Basic Syntax of the Anchor Tag

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

Key Parts

  • <a> → Anchor tag

  • href → Hyperlink reference (destination URL)

  • Link Text → Clickable text

Example 1: Simple Link

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

Output Explanation

  • “Visit Google” appears as a clickable link

  • Clicking it opens Google in the same tab

The href Attribute (Most Important)

The href attribute specifies where the link goes.

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

 Without href, the anchor tag does not work as a link.

Opening Links in a New Tab (target Attribute)

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

Common target Values

  • _self → Default (same tab)

  • _blank → New tab

  • _parent

  • _top

⚠️ Best Practice:

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

Types of Links Using Anchor Tag

1. External Links

Links to another website.

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

2. Internal Links (Same Website)

Links to another page on the same site.

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

3. Anchor (Bookmark) Links – Jump to Section

Used to jump to a specific section on the same page.

Step 1: Add an id

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

Step 2: Link to the id

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

4. Email Links (mailto)

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

5. Phone Links (tel)

 
<a href="tel:+919876543210">Call Us</a>

👉 Very useful for mobile users.

6. Download Links

 
<a href="file.pdf" download>Download PDF</a>

Using Images as Links

<a href="https://example.com">
  <img src="logo.png" alt="Company Logo">
</a>

Always include alt text for accessibility.

Styling Anchor Tags with CSS

Default Link States

  • a:link → Normal

  • a:visited → Visited

  • a:hover → Mouse over

  • a:active → Clicked

Example

a {
  color: blue;
  text-decoration: none;
}

a:hover {
  color: red;
  text-decoration: underline;
}

Removing Underline from Links

 
a { text-decoration: none; }

⚠️ Ensure links are still visually identifiable.

HTML Anchor Tag and SEO

SEO Best Practices

  • Use descriptive link text

  • Avoid “click here”

  • Keep links relevant

  • Use internal links wisely

Bad Example

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

Good Example

 
<a href="page.html">Learn HTML Anchor Tag</a>

Accessibility and Anchor Tags

Accessibility Tips

  • Use meaningful link text

  • Avoid vague phrases

  • Ensure sufficient color contrast

  • Use aria-label if needed

Example: 

<a href="contact.html" aria-label="Contact our support team">
Contact
</a>

Common Beginner Mistakes

  • Forgetting the href attribute
  •  Using “click here” everywhere
  •  Opening all links in new tabs
  •  Using links for buttons incorrectly
  •  Putting block elements incorrectly (old HTML)

a Tag vs Button

Use Case<a><button>
Navigation Yes No
Submitting form No Yes
Link to page Yes No
Action trigger No Yes

Use <a> for navigation, <button> for actions.

 

Real-World Example: Navigation Menu

<nav>
  <a href="index.html">Home</a> |
  <a href="about.html">About</a> |
  <a href="contact.html">Contact</a>
</nav>
  • Simple
  •  Semantic
  • User-friendly

FAQs: HTML Anchor Tag

What is the HTML anchor tag used for?

To create hyperlinks.

Is the <a> tag inline or block?

Inline by default (can be styled as block).

Can an anchor wrap block elements?

Yes, in HTML5.

Does anchor tag affect SEO?

Yes, through link text and structure.

Can I style anchor tags with CSS?

Yes, fully customizable.