Lesson 4 · about 15 minutes

🔗 Links: The Superpower of the Web

Today you learn the ONE tag that turned boring pages into the World Wide WEB. By the end, your shop won't be a page anymore — it will be a whole SITE.

🎬 Watch first (90 seconds)

Why is it called a "web"?

Imagine a million houses (pages), but no roads between them. Boring! You could only visit one house, ever.

Then someone invented links — magic doors between pages. Click a door, and BAM, you're on another page. Millions of pages, all connected by doors, like threads in a spider web. That's why it's called the web!

And the whole magic door is one little LEGO brick:

💡 The one idea of this lesson The <a> element makes anything clickable:

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

Remember attributes from last lesson? href is an attribute that says WHERE the door leads. The words between the tags are what you click on.

The href can point to two kinds of places:

🌍 A full internet address like https://www.google.com — teleporting to a house on the other side of the world.
🚪 A file sitting right next to yours, like about.html — just walking to the next room in YOUR house. No https:// needed, only the file name.

That second kind is today's big trick. It lets you build a site with MANY pages.

🛠️ Build it (the fun part)

🧪 Your mission Give your shop a second page that tells the story of who invented your product — and connect the two pages with links. Back and forth, like doors between rooms!

In the practice folder, create a new file called about.html — right next to myshop.html.

Type the full skeleton from memory if you can (lesson 2 training!). Peek at myshop.html only if you're stuck:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>About us</title>
</head>
<body>
  <h1>Who made this?</h1>
  <p>Robo Sneakers was invented by ME, a genius kid.</p>
</body>
</html>

(Write YOUR product's story, of course!)

Now open myshop.html and add a door to the new room, inside <body>:
```
<a href="about.html">About us</a>
```

In about.html, add a door back:

<a href="myshop.html">Back to the shop</a>

Save both files (⌘S). Open myshop.html in the browser and click "About us"… then click "Back to the shop"… then back again! 🎉
Stop and realize what just happened: two pages, connected by links. That's not a page anymore. That's a website. You built a SITE!

🕹️ Try it right here — the lesson checks your code!

Type in the dark box, watch the preview update live, then press Check my code ✔. (In the preview box the links won't actually take you anywhere — it's a safe sandbox — but the checker still sees your code!)

🔨 Now break it!

Time to break things on purpose in your practice files. Predict what will happen BEFORE you refresh!

In myshop.html, delete the closing </a> tag and save. Refresh. Whoa — everything AFTER the link turned into a link too! The browser doesn't know where the door ends, so it keeps going. This is a famous real-world bug that even grown-up coders make. Put the </a> back.
Change href="about.html" to href="banana.html". Save, refresh, click the link. You get an error page — the browser walked to a room that doesn't exist! Fix it back.
Add a third link to your favorite real website (start it with https://). Now your shop connects to the whole world.

⚠️ If clicking the link does nothing Check that your link has an href with something inside the quotes. An <a> without href is a door painted on the wall — it looks like text and goes nowhere.

🎮 Quiz time

No peeking at the notes above — trying to remember is what makes it stick!

📚 Want more?

⭐ Best thing to read next MDN: Creating links — the official guide from Mozilla (the Firefox people). It shows more link tricks, like linking to email addresses. Reading it counts as a lesson block!