HTML - Hyperlink

Hyperlinks are the defining characteristic of the World Wide Web. A hyperlink connects web pages to one another, allowing visitors to seamlessly navigate from their current document to another webpage, external website, file download, or specific page bookmark. The target destination is defined using a Uniform Resource Locator (URL) in the href attribute.

HTML hyperlinks can be divided into four fundamental categories:

Text Hyperlink: Standard clickable anchor text pointing to a webpage URL.

Image Hyperlink: An image wrapped in an anchor tag that triggers navigation upon being clicked.

Mailto & Tel Hyperlink: Links that trigger email clients or mobile telephone dialers.

Reference (Bookmark) Link: Internal jump links navigating directly to specific elements on the same page.

1. Standard Text Hyperlink

A basic text hyperlink is constructed using the <a> (anchor) tag with the href (hypertext reference) attribute:

Syntax & Example:


<a href="https://veewom.com" target="_blank" rel="noopener noreferrer">Visit Veewom Homepage</a>

Live Example: Click here to return to HTML Tutorial Home

2. Image Hyperlink

Rather than clicking on text, you can turn any image into a clickable button by nesting the <img> element directly inside an <a> tag:

Example:


<a href="https://veewom.com" title="Return to Veewom Home">
    <img src="images/logo.png" alt="Veewom Official Logo" width="120" height="40">
</a>

3. Email (mailto) & Phone (tel) Hyperlinks

Special protocol schemes allow visitors to launch native communication apps directly from a click:

Email Link with Pre-filled Subject & CC:


<a href="mailto:info@veewom.com?cc=support@veewom.com&subject=HTML%20Tutorial%20Inquiry">
    Send Us an Email
</a>

Direct Phone Call & WhatsApp Links:


<!-- Mobile Phone Dial Link -->
<a href="tel:+919876543210">Call Student Support: +91 98765 43210</a>

<!-- Direct WhatsApp Chat Link -->
<a href="https://wa.me/919876543210?text=Hello%20Veewom" target="_blank" rel="noopener">Chat on WhatsApp</a>

4. Internal Bookmark / Jump Links (Page Navigation)

To establish an internal link that smoothly scrolls to a specific location on the same page, assign an id to the destination section, and link to it using a hash symbol (#id_name):

Example:


<!-- Table of Contents at Top of Page -->
<p><a href="#viva-section">Skip to Viva Questions &darr;</a></p>

<!-- Large content body in between... -->

<!-- Destination Anchor -->
<h2 id="viva-section">Viva & University Exam Questions</h2>
<p><a href="#top">Back to Top &uarr;</a></p>

The 'target' Attribute and Security (rel="noopener")

The target attribute dictates where the linked document will open:

target="_self" (Default): Opens the linked document in the same tab or window.
target="_blank": Opens the linked document in a brand new browser tab.

Security Requirement: Whenever you use target="_blank", always add rel="noopener noreferrer". Without this, the newly opened page gains access to your original page's window.opener object via JavaScript, exposing your site to dangerous phishing attacks known as Reverse Tabnabbing!

SEO Best Practices for Bloggers: Link Attributes (rel)

Search engines evaluate outgoing links to assess website trust. Follow Google's official link attribute guidelines:

Attribute	Google Recommendation & Best Use Case
`rel="sponsored"`	Mandatory for paid affiliate links, advertisements, and commercial sponsorships. Prevents Google link penalties.
`rel="ugc"`	User-Generated Content. Used for links inside blog comments, discussion forums, and user profiles.
`rel="nofollow"`	Tells search engines not to endorse or pass PageRank authority to the linked webpage.

Hands-on Practice Session for Students

Lab Assignment 12: Build a Quick-Navigation Header and Student Contact Bar.

Problem Statement: Create a webpage navigation section featuring a text link to the syllabus, an image link to the university homepage, an internal bookmark link jumping down to the contact footer, a telephone link, and a downloadable PDF syllabus button.

Solution Code:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hyperlink Master - BCA Practical 12</title>
</head>
<body>
    <nav>
        <a href="https://veewom.com" target="_blank" rel="noopener noreferrer">
            <img src="images/logo.png" alt="Veewom Logo" width="100" height="35">
        </a> | 
        <a href="#contact-footer">Jump to Contact Info</a> | 
        <a href="pdf/index.pdf" download="HTML_Tutorial.pdf">Download Syllabus (PDF)</a>
    </nav>

    <main style="margin-top: 40px;">
        <h1>BCA Front-End Development Course</h1>
        <p>Master hyperlinks, anchor attributes, and search engine optimization.</p>
    </main>

    <footer id="contact-footer" style="margin-top: 100px; border-top: 1px solid #ccc; padding-top: 20px;">
        <h3>Department Contact Information</h3>
        <p>Email: <a href="mailto:info@veewom.com">info@veewom.com</a></p>
        <p>Helpline: <a href="tel:+919876543210">+91 98765 43210</a></p>
        <p><a href="#top">&uarr; Back to Top</a></p>
    </footer>
</body>
</html>

Viva & University Exam Questions (BCA Exam Preparation)

Q1: What is the difference between an Absolute URL and a Relative URL?

An Absolute URL contains the entire web address including protocol and domain name (e.g., https://veewom.com/html/link.htm). A Relative URL points to a file relative to the current webpage location without specifying a domain (e.g., images.htm or ../css/styles.css).

Q2: What is the purpose of the download attribute on anchor tags?

The download attribute instructs the browser to download the target file directly to the user's hard drive instead of navigating to it or displaying it in the browser window.

Q3: How do internal page jump links work in HTML5?

In HTML5, internal jump links are created by targeting any element's unique id attribute using a hashtag in the anchor's href (e.g., <a href="#faq"> navigates to <div id="faq">). The legacy <a name="..."> method is obsolete.

Frequently Asked Questions (FAQ)

How do I remove the default underline from hyperlinks?

In CSS, set text-decoration: none; on your anchor selector: a { text-decoration: none; }. To restore the underline only when hovered, add a:hover { text-decoration: underline; }.

Why should bloggers avoid anchor text like "Click Here"?

Google crawlers and screen readers use anchor text to determine what the destination page is about. Generic phrases like "click here" offer zero contextual relevance. Descriptive phrases like "download BCA practical notes" or "learn HTML formatting" boost search rankings and accessibility.