HTML Links

Subject: html

HTML Links

Links (or hyperlinks) are a core component of the web, enabling users to navigate across pages, documents, or resources. The anchor tag (<a>) is used to create these interactive elements.

🔗 What Is an HTML Link?

An HTML link connects one document to another. It's defined using the <a> tag and usually includes the href attribute to specify the destination.

Syntax:

🚀 Try it in Compiler
  • href: The URL or file to navigate to
  • Link Text: The visible clickable text or content

Example:

🚀 Try it in Compiler

🎨 Default Browser Styles

  • Unvisited links: Blue & underlined
  • Visited links: Purple & underlined
  • Active links: Red & underlined

You can override these with CSS:

🚀 Try it in Compiler

🪟 The target Attribute

The target attribute controls where the linked page opens:

  • _blank: Opens in a new tab or window
  • _self: Opens in the same tab (default)
  • _parent: Opens in the parent frame
  • _top: Opens in the full body of the window

Example:

🚀 Try it in Compiler

🌐 Absolute vs Relative URLs

  • Absolute URL: Full address with domain — for external sites
🚀 Try it in Compiler
  • Relative URL: Relative path within your site
🚀 Try it in Compiler

🖼️ Using Images as Links

Make any image clickable by wrapping it in an <a> tag:

🚀 Try it in Compiler

📧 Email Links with mailto:

Open the user’s email client with a pre-filled address:

🚀 Try it in Compiler

With subject and body:

🚀 Try it in Compiler

🧠 Buttons as Links (JavaScript)

You can use a <button> to behave like a link:

🚀 Try it in Compiler

🏷️ Add Tooltips with title Attribute

Provide extra info on hover for accessibility:

🚀 Try it in Compiler

✅ Key Takeaways

  • Use <a href="..."> to create links
  • Use absolute URLs for external links and relative URLs for internal ones
  • Use target="_blank" for new tabs
  • Wrap images in <a> to create clickable graphics
  • Use mailto: for email actions
  • Add title for accessibility and JavaScript for dynamic navigation
Next: HTML Favicon