📌 Introduction
The <a> tag (anchor tag) is used to create links in HTML.
It allows users to:
- Navigate between pages
- Open external websites
- Download files
- Jump to sections inside a page
🧱 Syntax
<a href="URL">Link text</a>
💡 Example (External Link)
<!DOCTYPE html>
<html>
<head>
<title>Anchor Example</title>
</head>
<body>
<p>Visit my website:</p>
<a href="https://www.google.com">Go to Google</a>
</body>
</html>
🖥️ Output Explanation
- The text “Go to Google” becomes clickable
- When clicked, it opens the link in the same tab
🎯 The href Attribute
The most important part of <a> is href:
<a href="https://example.com">Visit</a>
✔ It defines the destination of the link
🌍 Types of Links
1. External Link
<a href="https://www.github.com">GitHub</a>
2. Internal Page Link
<a href="about.html">About Page</a>
3. Email Link
<a href="mailto:test@example.com">Send Email</a>
4. Phone Link
<a href="tel:+213123456789">Call Us</a>
5. Anchor (Jump inside page)
<a href="#section1">Go to Section 1</a>
<h2 id="section1">Section 1</h2>
🚀 Opening Links in New Tab
<a href="https://google.com" target="_blank">Open Google</a>
✔ target="_blank" opens a new tab
🎯 Why <a> is Important
- It connects all web pages
- It is the foundation of navigation
- Without it, the web would not “connect”
⚠️ Best Practices
Always use meaningful link text ❌ “Click here” ✔ “Learn HTML basics”
Use
target="_blank"only when neededMake sure links are valid
🚫 Common Mistakes
- Missing
href❌ - Using empty links ❌
- Overusing “click here” ❌
🎨 Styling Links
<a href="https://example.com" style="color:red;">My Link</a>
🧪 Mini Exercise
Create a page with:
- A link to your favorite website
- A link that opens in a new tab
- An email link
- An internal link to a section in the same page