Chapter 1.4☕ 10 min read

Links

Auto stand se destination tak — ek click mein pahuncho.

01What are Links?

You are at Lakdi-ka-pool auto stand. You tell the auto driver: "Bhai, Hitech City chalo." He takes you from one place to another. That's exactly what an HTML link does.

The <a> tag (anchor tag) creates a clickable link. User clicks it — browser takes them from current page to another page. Just like the auto takes you from Lakdi-ka-pool to Hitech City.

🛺

Auto Analogy: The href attribute is like telling the auto driver the destination. No href = no destination = auto won't move. Link without href is useless.

02The Anchor Tag — Anatomy

The <a> tag creates clickable links. Here's the anatomy:

<a> — The auto itself. This is the clickable element.
href — The destination. "Hitech City" = the URL you want to go to.
target="_blank" — New window. Like taking a second auto instead of the same one.
Text between tags — What user sees. "Click here" or "Go to Hitech City" — the display text.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Hyderabad Places to Visit</title>
  </head>
  <body>
    <h1>Hyderabad Places to Visit</h1>

    <h2>Historical Places</h2>
    <p>
      <a href="https://en.wikipedia.org/wiki/Charminar" target="_blank">
        Charminar — Read on Wikipedia ↗
      </a>
    </p>
    <p>Iconic 400-year-old monument with 4 minarets. Heart of old Hyderabad.</p>

    <p>
      <a href="golconda-fort.html">Golconda Fort — Full Guide →</a>
    </p>
    <p>Magnificent fort with acoustic system and light show at night.</p>

    <h2>Lakes & Parks</h2>
    <p>
      <a href="hussain-sagar.html">Hussain Sagar — Visit Guide →</a>
    </p>
    <p>Heart-shaped lake with Buddha statue. Boat rides available.</p>
  </body>
</html>

<a href="...">Opening tag with destination URL

href="https://..."Absolute URL — external website

href="about.html"Relative URL — local file in same folder

href="/contact"Relative URL — from root of website

target="_blank"Opens in new tab — like a new auto

</a>Closing tag — clickable area ends here

03Types of Links

Just like Hyderabad has different routes — local roads, PVNR Expressway, ORR — HTML links have different types based on where they go.

Type Example

🌐 Absolute URL href="https://wikipedia.org" Learn → 📁 Relative URL href="about.html" Learn → 🏠 Root Relative href="/about" Learn → 📍 Anchor Link href="#section" Learn → 📧 Email Link href="mailto:bhai@mail.com" Learn → 📞 Phone Link href="tel:+919876543210" Learn → 📥 Download Link href="file.pdf" download Learn →

04How Links Work — Flow

User sees linkClickable text with underline on the page

→

User clicks itBrowser reads the href destination

→

Browser navigatesNew page loads — user reaches destination

Pro tip: Always use descriptive link text. "Click here" is bad. "Visit Paradise Biryani Menu" is good. Google reads your link text to understand the page.

05Exercise — Hyderabad Directions Page

Build a page with links to popular Hyderabad places — like a local directions guide.

Open VS Code. Create a new file — name it hyderabad-places.html

Use the starter code below and add your links:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Hyderabad Places to Visit</title>
  </head>
  <body>
    <!-- h1: Page title -->
    <!-- h2: Categories -->
    <!-- a href: Links to places -->
    <!-- p: Descriptions -->

  </body>
</html>

Complete these:

An <h1> — "Hyderabad Places to Visit" 3 links using <a> — Charminar, Golconda Fort, Hussain Sagar One link opens in target="_blank" (external site) Two links are relative (local pages like charminar.html) A <p> under each link describing the place

💡

Common mistake: Forgetting http:// in external links. href="google.com" treats it as a local file. Use href="https://google.com" for external sites.

Done — Key Points:

✅ <a> tag creates clickable links
✅ href = destination URL — without it, link does nothing
✅ target="_blank" opens link in new tab
✅ Absolute URLs = full address (https://...)
✅ Relative URLs = local files (about.html, /contact)
✅ Use descriptive text — never "click here"

Previous1.3 — Headings & Paragraphs 📋 All Chapters Next Chapter1.5 — Images →