Topic 20 of 57 4. HTML Links and Media Interactive Tutorial

HTML Links: Anchor Tag, Target Attribute, and Examples

13 mins read Last updated: 12 Nov 2026 18,900 views

On This Page0 sectionsQuick jump to subtopic

Topic Overview & Definition

Key Question

How do HTML anchor tags (<a>) create hyperlinks, page jumps, email triggers, and telephone links?

Direct Answer & Overview

HTML hyperlinks are created using the (anchor) tag with the 'href' attribute. Anchor tags can link to external websites, navigate between local website pages, jump to specific page section IDs (#section), trigger email clients (mailto:), and initiate phone calls (tel:).

Comprehensive Step-by-Step Concepts

1) Anatomy of an Anchor Tag: The tag wraps visible text or images. The destination is declared in the 'href' (hypertext reference) attribute. If 'href' is missing, the tag acts as a placeholder link. 2) The 'target' Attribute: - target="_self" (Default): Opens the link in the current browser tab. - target="_blank": Opens the link in a fresh new browser tab. - target="_parent": Opens in the parent frame. - target="_top": Breaks out of all frames to open in the full window body. 3) Critical Security: rel="noopener noreferrer": Whenever opening external links in a new tab via target="_blank", always add rel="noopener noreferrer" to prevent malicious sites from hijacking the originating tab via the window.opener JavaScript object. 4) Page Jump Anchors (Bookmark Links): Linking to an ID fragment (e.g. See Pricing) smoothly jumps the viewport straight to

on the same page. 5) Interactive Protocols: - Email Links: Contact Support - Phone Links: Call Toll-Free - Download Trigger: Adding the boolean attribute 'download' forces browsers to download the resource rather than navigate to it.

Runnable HTML5 Code Example & Practical Implementation

index.html

HTML Editor

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hyperlinks Showcase</title>
</head>
<body>
    <h1>Hyperlinks Guide</h1>
    
    <!-- External Secure Link in New Tab -->
    <p>Visit the official <a href="https://w3.org" target="_blank" rel="noopener noreferrer">W3C Standards Website</a>.</p>
    
    <!-- Same-Page Bookmark Jump -->
    <p><a href="#contactSection">Jump directly to Contact Information &darr;</a></p>

    <!-- Communication Protocols -->
    <p>
        <a href="mailto:info@operatetools.com?subject=Tutorial%20Inquiry">Send Us an Email</a> |
        <a href="tel:+15551234567">Call Customer Service</a>
    </p>

    <!-- Download Link -->
    <p><a href="/downloads/sample-document.pdf" download="sample.pdf">Download Free PDF Guide</a></p>

    <div style="margin-top: 600px;" id="contactSection">
        <h2>Contact Section (Jump Target)</h2>
        <p>You have successfully jumped to this bookmark!</p>
    </div>
</body>
</html>

Key Takeaways, Best Practices & Standards

Best Practice & Standards

Always include rel="noopener noreferrer" when using target="_blank", and write descriptive link text rather than generic phrases like 'click here'.

Common Technical & Interview Questions

Q1: What security vulnerability is caused by target="_blank" without rel="noopener"?

A1: The 'tabnabbing' vulnerability: the newly opened page gains access to the originating tab via 'window.opener', allowing attackers to redirect the background tab to a convincing phishing clone without the user noticing.

Q2: What is the difference between relative links and absolute links?

A2: Absolute links include the full protocol and domain (https://example.com/about), pointing to an explicit web address. Relative links (about.html or ../images/pic.png) point to paths relative to the current file's directory.

Q3: Can an anchor tag wrap an entire card containing headings and images?

A3: Yes! In modern HTML5, tags are permitted to wrap block-level elements, making entire feature cards, images, and paragraphs clickable as a single unified link.

All HTML Topics

Previous TopicHTML Description Lists: DL, DT, and DD Tags Explained

Next TopicHTML Audio Tag: Attributes, Supported Formats, and Examples