🧱 Days 1–5 – HTML Foundations · Day 03
Day 3: Links, Paths & Navigation Menus
⏱ 75 min📶 Beginner🎯 100% self-study
Day 3 / 15
✅ Today you will learn
- The <a> tag and href
- Absolute vs relative paths (../ explained)
- target="_blank" with rel="noopener"
- Jump links with id anchors
- tel:, mailto:, WhatsApp and download links, and a nav menu
🏢 In the real world
Customers want to tap a number to call, open WhatsApp to order, and jump straight to the menu. Sharma Sweets will now have three pages – Home, Menu and Contact – linked by a navigation bar. Links are what make a set of pages a website.
The anchor tag
HTML
<p>Order online on <a href="https://www.swiggy.com">Swiggy</a>.</p> <p>Read our <a href="https://example.com/about" title="Our 40-year story">story</a> (hover me).</p>
Absolute vs relative paths
Folder structure
sharma-sweets/
├── index.html
├── menu.html
├── contact.html
├── images/
│ └── logo.png
└── offers/
└── diwali.html| From file | Link to | Write href |
|---|---|---|
| index.html | menu.html | menu.html |
| index.html | offers/diwali.html | offers/diwali.html |
| offers/diwali.html | index.html | ../index.html |
| offers/diwali.html | images/logo.png | ../images/logo.png |
| any page | site root page | /menu.html (root-relative, on a server) |
| any page | another website | https://www.zomato.com (absolute) |
💡 ../ means “go up one folder”
Relative links keep working when you move the whole folder to a server or a pen drive. Use absolute URLs only for other websites.
Opening in a new tab – safely
HTML
<p><a href="https://maps.google.com/?q=Johari+Bazaar+Jaipur" target="_blank" rel="noopener noreferrer">Open in Google Maps ↗</a></p> <p><small>Use target="_blank" only for external sites, and add rel="noopener".</small></p>
Jump links inside a page
HTML
<p><a href="#ghee">Ghee sweets</a> · <a href="#namkeen">Namkeen</a></p> <h2 id="ghee">Ghee sweets</h2> <p>Kaju katli, besan ladoo, motichoor ladoo, ghewar, mysore pak.</p> <p style="height:120px">(scroll)</p> <h2 id="namkeen">Namkeen</h2> <p>Bhujia, mathri, kachori. <a href="#top">Back to top ↑</a></p>
Call, e-mail, WhatsApp and download links
HTML
<p>📞 <a href="tel:+919829012345">Call 98290 12345</a></p> <p>✉️ <a href="mailto:orders@sharmasweets.in?subject=Bulk%20order">orders@sharmasweets.in</a></p> <p>💬 <a href="https://wa.me/919829012345?text=Hi%2C%20I%20want%20to%20order%20sweets">Order on WhatsApp</a></p> <p>📄 <a href="menu.pdf" download>Download menu (PDF)</a></p>
| Link | What it does on a phone |
|---|---|
| tel:+91… | Opens the dialler with the number |
| mailto:…?subject=… | Opens the e-mail app with the subject filled |
| https://wa.me/91…?text=… | Opens WhatsApp chat with a ready message |
| download | Saves the file instead of opening it |
🧠 URL encoding
Spaces and commas in a link must be encoded: space = %20, comma = %2C. That is why the WhatsApp text looks strange in the code.
A navigation menu
HTML
<nav aria-label="Main"> <a href="index.html" aria-current="page">Home</a> | <a href="menu.html">Menu</a> | <a href="contact.html">Contact</a> | <a href="https://wa.me/919829012345">Order on WhatsApp</a> </nav> <h1>Sharma Sweets</h1>
Writing good link text
Bad
- Click here
- Read more
- https://bit.ly/x9k2
- Link
Good
- Download the Diwali menu (PDF, 1 MB)
- Read our 40-year story
- Order on WhatsApp
- Call 98290 12345
🏅 Job skills unlocked today
✔ Create internal and external links✔ Write correct relative paths✔ Add jump, tel, mailto, WhatsApp and download links✔ Build an accessible nav menu
Practice tasks
🏋️ Practice – do it yourself
Task 1: Create
menu.html and contact.html, each with the same nav menu linking all three pages.Show solution
HTML
<nav aria-label="Main"> <a href="index.html">Home</a> | <a href="menu.html" aria-current="page">Menu</a> | <a href="contact.html">Contact</a> </nav> <h1>Our Menu</h1> <p><a href="#milk">Milk sweets</a> · <a href="#dry">Dry fruit sweets</a></p> <h2 id="milk">Milk sweets</h2><p>Rasmalai, kalakand, peda.</p> <h2 id="dry">Dry fruit sweets</h2><p>Kaju katli, badam barfi.</p>
Task 2: From
offers/diwali.html, write links to contact.html and images/logo.png.Show solution
HTML
<a href="../contact.html">Contact us</a> <a href="../images/logo.png">See our logo</a>
Task 3: Make a WhatsApp link that opens a chat with the message “Need 2 kg kaju katli for Saturday”.
Show solution
HTML
<a href="https://wa.me/919829012345?text=Need%202%20kg%20kaju%20katli%20for%20Saturday">Order kaju katli</a>
Quick quiz
🧠 Quick Quiz – test yourself
1. Which attribute holds the link address?
Hypertext reference.
2. From /offers/diwali.html, ../index.html points to…
.. = parent folder.
3. href="#menu" jumps to…
Fragment identifier.
4. Why add rel="noopener" with target="_blank"?
Prevents reverse tab-nabbing.
5. Best link text?
Describes the destination.
Interview corner
💼 Interview Corner
Absolute vs relative URL?
An absolute URL includes the protocol and domain (https://site.com/page). A relative URL is resolved from the current page’s location (../page.html) – portable within one site.
What does aria-current="page" do?
It tells assistive technologies which link in a navigation represents the current page; CSS can also style it.
Summary
- <a href> links pages; use relative paths inside your site.
- ../ goes up a folder; #id jumps within a page.
- tel:, mailto:, wa.me and download create action links.
- Clear link text and a nav with aria-current improve usability.
➡️ Next
Day 4: images, audio, video and embeds – add sweet photos, a shop video and a map.
Frequently Asked Questions
Should all links open in a new tab?
No. Internal links should open in the same tab; users can choose a new tab themselves. Use new tabs mainly for external sites or files.
Why does my link work on my computer but not online?
Usually a path or capital-letter mismatch: servers are case-sensitive (Menu.html ≠ menu.html) and C:\ paths do not exist online.
