⬅ Previous Next ➡

10. Hyperlinks (Anchor Tag)

Hyperlinks (Anchor Tag)
  • Hyperlinks (The Anchor Tag): Hyperlinks are used to connect one webpage to another. The <a> tag (Anchor) is used to create these links.
  • The href Attribute: This is the most important attribute. It stands for Hypertext Reference and specifies the destination address (URL) of the link.
  • Target Attribute: Defines where to open the linked document:
    • target="_self": Opens the link in the same tab (default).
    • target="_blank": Opens the link in a new tab.
  • Types of Links:
    • External Links: Links to other websites (e.g., https://google.com).
    • Internal Links: Links to pages within the same website (e.g., about.html).
    • Email Links: Using mailto: to open the user's email client.

<!DOCTYPE html>
<html>
<head>
  <title>Hyperlink Examples (Anchor Tag)</title>
</head>

<body>

<h2>Hyperlinks in HTML (&lt;a&gt; Tag)</h2>

<!-- Example 1: Standard External Link -->
<p>Visit <a href="https://sswebtechio.com">sswebtechio</a> for web services.</p>

<!-- Example 2: Link opening in a New Tab -->
<p>Check your skills at <a href="https://quitexams.com" target="_blank">quitexams</a>.</p>

<!-- Example 3: Specific Page Link -->
<p>Practice your typing here: <a href="https://www.sswebtechio.com/typing/typing.php">Start Typing Test</a></p>

<!-- Example 4: Another Website Link -->
<p>Learn more at <a href="https://meherinfotech.com">meherinfotech</a>.</p>

<!-- Example 5: Link with Title (Tooltip) -->
<p>Hover to see tooltip: <a href="https://sswebtechio.com" title="Open sswebtechio website">sswebtechio (tooltip)</a></p>

<!-- Example 6: Email Link (mailto) -->
<p>Send Email: <a href="mailto:someone@example.com">someone@example.com</a></p>

<!-- Example 7: Phone Link (tel) -->
<p>Call Now: <a href="tel:+919876543210">+91 98765 43210</a></p>

<!-- Example 8: SMS Link (sms) -->
<p>Send SMS: <a href="sms:+919876543210">Message Us</a></p>

<!-- Example 9: Internal Page Link (Jump to Section) -->
<p>Go to <a href="#contact">Contact Section</a> on this page.</p>

<h3 id="contact">Contact Section</h3>
<p>This is the contact area. The link above jumps here using id.</p>

<!-- Example 10: Download Link -->
<p>Download File: <a href="notes.pdf" download>Download Notes PDF</a></p>

<!-- Example 11: Image as a Link -->
<p>Click image to open website:</p>
<a href="https://sswebtechio.com" target="_blank">
  <img src="logo.png" alt="sswebtechio logo" width="150">
</a>

<!-- Example 12: Link to Another Page in Same Site -->
<p>Open About Page: <a href="about.html">About Us</a></p>

<!-- Example 13: Link with rel (safe for target=_blank) -->
<p>Open in new tab safely: 
  <a href="https://quitexams.com" target="_blank" rel="noopener noreferrer">quitexams safe link</a>
</p>

<!-- Example 14: Clickable Text Block (Link wraps text) -->
<a href="https://sswebtechio.com">
  <p>This whole paragraph is clickable because it is inside an anchor tag.</p>
</a>

</body>
</html>
⬅ Previous Next ➡