HTML Anchor Tag (a): A Complete Guide for Beginners
The HTML Anchor Tag is one of the most important tags in HTML.
It is used to create links (hyperlinks) between web pages.
Without the anchor tag, the internet would not work the way it does today.
In this beginner-friendly guide, you will learn:
What the HTML anchor tag is
How to create links
Important attributes
Internal and external links
Real examples
Common mistakes
Best practices
Let’s start learning step by step.
What Is the HTML Anchor Tag?
The HTML anchor tag <a> is used to create hyperlinks.
Hyperlinks allow users to:
Go to another webpage
Open a file
Jump to another section
Send an email
Make a phone call
In simple words, the anchor tag connects pages together.
Basic Syntax of HTML Anchor Tag
<a href="URL">Link Text</a>
Explanation:
<a>→ Opening anchor taghref→ Specifies the link destinationLink Text→ Clickable text</a>→ Closing tag
Simple Example
<a href="https://www.google.com">Visit Google</a>
When clicked, it opens Google.
Types of Links in HTML
External Links
Links that go to another website.
<a href="https://www.wikipedia.org">Visit Wikipedia</a>Internal Links
Links within your own website.
Clicking opens email software.
<a href="about.html">About Us</a>This connects to another page in the same folder.
Anchor Links (Jump Links)
Used to jump to a section on the same page.
Step 1: Add ID to Section
<h2 id="contact">Contact Us</h2>Step 2: Link to That Section
<a href="#contact">Go to Contact Section</a>Email Links
Clicking opens email software.
Phone Links
Important Attributes of Anchor Tag
href (Required)
Defines the destination URL.
target Attribute
Defines where to open the link.
Common Values:
_self→ Same tab (default)_blank→ New tab_parent_top
title Attribute
Shows tooltip text on hover.
rel Attribute (Security & SEO)
Used with _blank.
</a>
<!DOCTYPE html>
<html>
<head>
<title>Anchor Tag Example</title>
</head>
<body>
<h2>HTML Anchor Tag Example</h2>
<p>
<a href="https://www.google.com" target="_blank">
Visit Google
</a>
</p>
<p>
<a href="#bottom">Go to Bottom</a>
</p>
<h3 id="bottom">You reached the bottom!</h3>
</body>
</html>Anchor Tag vs Button (Comparison Table)
| Feature | Anchor Tag <a> | Button <button> |
|---|---|---|
| Used for navigation | ✅ Yes | ❌ No |
| Used for actions (forms) | ❌ No | ✅ Yes |
| Requires href | ✅ Yes | ❌ No |
| Redirects to another page | ✅ Yes | With JS |
Use anchor tag for navigation and button for actions.
Step-by-Step Guide to Create a Link
Step 1: Open HTML File
Use VS Code, Notepad, or any editor.
Step 2: Write Anchor Tag
Step 3: Save File
Save with .html extension.
Step 4: Open in Browser
Click the link to test.
Real-World Use Cases
The HTML anchor tag is used in:
- Navigation menus
- Footer links
- Blog post links
- Download buttons
- Social media icons
- Internal linking for SEO
Common Beginner Mistakes
- Forgetting the
hrefattribute - Using “click here” everywhere
- Opening all links in new tabs
- Using links for buttons incorrectly
- Putting block elements incorrectly (old HTML)
Example (Navigation Menu):
<nav>
<a href="index.html">Home</a>
<a href="about.html">About</a>
<a href="contact.html">Contact</a>
</nav>Common Mistakes Beginners Make
1. Missing href Attribute
Wrong:
Correct:
2. Forgetting Quotes
Wrong:
Correct:
3. Using Button Instead of Anchor
Navigation should use <a>, not <button>.
4. Not Using rel with _blank
Always add:
Best Practices for HTML Anchor Tag
- Use descriptive link text (not “Click Here”)
- Use target=”_blank” for external links
- Add rel attribute for security
- Keep URLs clean
- Use internal links for better SEO
- Avoid broken links
Good Example:
Bad Example:
Descriptive text improves SEO.
SEO Benefits of Anchor Tag
Anchor tags are essential for:
Internal linking
Page authority distribution
Better crawling by search engines
Improved user experience
Internal links help search engines understand website structure.
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.
