Lesson 2 · about 15 minutes

💀 The HTML Skeleton

Your page from lesson 1 worked — but it was missing its bones! Today you give your product page the skeleton every real website has.

🎬 Watch first (90 seconds)

Wait... my page worked. Why does it need bones?

In lesson 1 you typed an <h1> and some <p> bricks, and the browser showed them. Nice! But secretly, the browser was doing you a favor. Real web pages have a skeleton — a set of bricks the browser expects to find, in a certain order. Like a house: before you decorate the rooms, you need a foundation, walls, and a roof.

💡 The one idea of this lesson Every real page is built on this skeleton. Think of it as a school backpack: the <head> is the name label (info the browser reads, nobody sees it on the page), and the <body> is everything inside (the stuff everyone sees).

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Robo Sneakers</title>
  </head>
  <body>
    <h1>Robo Sneakers</h1>
    <p>Shoes that tie themselves!</p>
  </body>
</html>

Let's meet each bone:

<!DOCTYPE html> — the very first line. It shouts "Hey browser, this is modern HTML!" (It's the one weird brick with no closing tag.)
<html> — the giant box that holds EVERYTHING. Opens at the top, closes at the very bottom.
<head> — the backpack label. Invisible info FOR the browser:
- <meta charset="UTF-8"> — "read my letters and emoji correctly, please!" 🎉
- <title> — the page's name. Here's the fun part: it does NOT show on the page. It shows in the browser TAB at the top! Look at your tab right now — see "Lesson 2 — The HTML Skeleton"? That's a <title> at work.
<body> — everything people SEE. Your <h1> and <p> bricks live here.

🛠️ Build it (the fun part)

🧪 Your mission Upgrade myshop.html from a pile of bricks into a real building — and get your product name to appear in the browser tab!

Open practice/myshop.html in VS Code. Your <h1> and <p> lines from lesson 1 are still there.

Above everything, type the top of the skeleton:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Robo Sneakers</title>
</head>
<body>

Use YOUR product name inside the <title>, not mine!

Your old <h1> and <p> lines should now sit below the <body> line — they live inside the body.
Under your last paragraph, close everything up:
```
</body>
</html>
```
Save (⌘S) and refresh the browser (⌘R).
Now look UP — at the browser tab. 👀 It shows your product name! Before, it just showed the boring filename. Your product has a name tag now. 🎉

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

Type in the dark box, watch the preview update live, then press Check my code ✔ to see if you nailed the task.

🔨 Now break it!

Time to poke the skeleton and see what happens. Do these in myshop.html, and predict what will happen BEFORE you refresh!

Delete the words inside <title></title> (leave the tags). Save, refresh. What does the tab show now? (Hint: something boring.) Put your product name back.
Move your <h1> line up into the <head>. Save, refresh. Surprise — it probably still shows up! Browsers are super forgiving and quietly fix your mistakes. Sounds nice, but it's sneaky: the page LOOKS fine while the code is actually wrong. That's exactly why knowing the skeleton matters — later, when an AI writes code for you, YOU need to be able to read it and spot when something is in the wrong place. Move the <h1> back into the <body>.
Change your <title> to something silly with an emoji, like 🚀 Robo Sneakers 🚀. Save, refresh, check the tab. (Thank the <meta charset> brick for the emoji working!)

⚠️ If nothing changes when you refresh You probably forgot to save the file first. Save (⌘S), THEN refresh (⌘R). Every coder on Earth makes this mistake daily.

🎮 Quiz time

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

📚 Want more?

⭐ Best thing to read next MDN: Basic HTML syntax — the official guide from Mozilla (the Firefox people). It walks through the whole skeleton with extra details and examples. Reading it counts as a lesson block!