HTML Hyperlinks

Introduction to HTML Hyperlinks

A hyperlink (or link) allows users to navigate from one webpage to another or to a specific part of the same page.

In HTML, hyperlinks are created using the <a> tag, which stands for anchor.

Hyperlinks are the backbone of the web—they connect pages, sites, and content.

Basic Syntax

<a href="URL">Link Text</a>

<a> → anchor tag
href → attribute specifying the destination URL
Link Text → clickable text that appears on the page

Example:

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

Types of Hyperlinks

1️⃣ External Links

Navigate to a different website.

<a href="https://www.example.com" target="_blank">Visit Example</a>

target="_blank" → Opens the link in a new tab
target="_self" → Opens in the same tab (default)

2️⃣ Internal Links

Navigate to another page within the same website.

<a href="about.html">About Us</a>

Simply provide the path of the page relative to the current page.

3️⃣ Anchor Links (Jump to Section on Same Page)

<h2 id="contact">Contact Section</h2>
<a href="#contact">Go to Contact Section</a>

id attribute on the target element
#id in the href to jump directly

4️⃣ Email Links (mailto)

Opens the user’s default email client.

<a href="mailto:someone@example.com">Send Email</a>

5️⃣ Telephone Links (tel)

Clickable links for phone numbers (useful on mobile devices).

<a href="tel:+1234567890">Call Us</a>

6️⃣ Download Links

Allows users to download a file.

<a href="file.pdf" download>Download PDF</a>

The download attribute forces download instead of opening the file.

Additional Attributes for <a> Tag

AttributePurposehrefDestination URL or pathtarget_blank (new tab), _self (same tab), _parent, _toptitleTooltip when hovering over the linkrelRelationship between the current page and linked page (e.g., nofollow)

Example:

<a href="https://example.com" target="_blank" title="Visit Example Site" rel="noopener">
    Visit Example
</a>

Styling Hyperlinks

Links can be styled using CSS:

<style>
a {
    color: blue;           /* Link color */
    text-decoration: none;  /* Remove underline */
}

a:hover {
    color: red;            /* Hover color */
    text-decoration: underline; /* Underline on hover */
}
</style>

Practice Code Example

Create a webpage demonstrating:

External link
Internal link
Anchor link on the same page
Email link
Telephone link
Downloadable link

Example Code:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>HTML Hyperlinks Practice</title>
</head>
<body>

    <h1>HTML Hyperlinks Example</h1>

    <!-- External link -->
    <p><a href="https://www.google.com" target="_blank">Go to Google</a></p>

    <!-- Internal link -->
    <p><a href="about.html">Go to About Page</a></p>

    <!-- Anchor link -->
    <p><a href="#contact">Jump to Contact Section</a></p>

    <p style="margin-top: 300px;" id="contact">This is the Contact Section</p>

    <!-- Email link -->
    <p><a href="mailto:someone@example.com">Send Email</a></p>

    <!-- Telephone link -->
    <p><a href="tel:+1234567890">Call Us</a></p>

    <!-- Download link -->
    <p><a href="sample.pdf" download>Download PDF File</a></p>

</body>
</html>

HTML