🔗 HTML Links (<a>)

Learn how to create hyperlinks to navigate between pages, files, and sections

📚 Anchor Tag Overview

📌 Key Concept

The <a> (anchor) tag defines a hyperlink, which is used to link from one page to another. The most important attribute of the <a> element is the href attribute, which indicates the link's destination.

Link Types

Type Description Example
Absolute URL Full web address https://www.google.com
Relative URL Link to local file about.html
Anchor Link Jump to section on page #section1
Email Link Opens email client mailto:user@example.com

💻 Code Examples

📝 Example 1: Basic External Link

Link to another website:

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

▶️ Output:

Visit Google

📝 Example 2: Open in New Tab

Use target="_blank" to open the link in a new browser tab:

<a href="https://www.google.com" target="_blank">Visit Google (New Tab)</a>

▶️ Output:

Visit Google (New Tab)

📝 Example 3: Email and Phone Links

Special protocols for communication:

<a href="mailto:contact@example.com">Send Email</a>
<a href="tel:+1234567890">Call Us</a>

▶️ Output:

Send Email
Call Us

📝 Example 4: Internal Page Link

Link to a file within your website:

<a href="form-lesson.html">Go to Forms Lesson</a>

▶️ Output:

Go to Forms Lesson

📝 Example 5: Link with Tooltip

Show text when hovering over the link:

<a href="#" title="This is a helpful tooltip">Hover over me</a>

▶️ Output:

Hover over me

🔧 Tag Attributes

Attribute Description Example
href The URL or path to navigate to (required) href="page.html"
target Where to open the link (_blank for new tab) target="_blank"
title Tooltip text shown on hover title="Click me"
download Downloads the file instead of navigating download="file.pdf"

✍️ Practice Assignments

🎯 Assignment 1: Navigation Menu

Easy

Create a simple navigation menu using links.

  • Create links for Home, About, and Contact
  • Use href="#" for placeholder links
  • Separate them with a pipe character (|)

🎯 Assignment 2: Contact Links

Medium

Create a contact section with functional links.

  • Add a "Send Email" link using mailto:
  • Add a "Call Support" link using tel:
  • Add a link to an external map website opening in a new tab

🎯 Assignment 3: Image Link

Hard

Create a clickable image that links to another page.

  • Nest an <img> tag inside an <a> tag
  • Add a title attribute to the link
  • Ensure the image has alt text

🎓 Key Takeaways

  • Use <a> tags to create hyperlinks
  • The href attribute is required for the link to work
  • Use target="_blank" to open links in a new tab
  • Links can point to web pages, files, email addresses, or phone numbers
  • You can turn images into links by wrapping them in an anchor tag