Reading the code — spotting tags like <h1> and <p>

⏱ 20 min learn Ages 9 & 12

💡 The big idea

You don't need to memorise HTML to be useful with it. You need to be able to READ it. A developer who can read someone else's code can understand, fix, and improve almost anything. This is the code-reading skill.

🕵️

The detective game — read this code

▶

<html> <head><title>Space Facts</title></head> <body> <h1>Amazing Space Facts</h1> <p>Space is incredibly vast and mysterious.</p> <h2>The Planets</h2> <ul> <li>Mercury is closest to the Sun</li> <li>Jupiter is the biggest planet</li> </ul> <a href="https://nasa.gov">Visit NASA</a> </body> </html>

Q1 What text appears on the browser tab?

Q2 How many items are in the list?

Q3 What website does the link go to?

Q4 How is <h1> different from <h2>?

Q5 What's the difference between <head> and <body>?

🎮

View any page's source code

▶

"Every webpage you've ever visited has HTML underneath. In any browser, press Ctrl+U (or Cmd+U on Mac) to see the source code. Try it on a simple website. Can you find the <h1> and <p> tags?"

🗣 Challenge: Right-click on any webpage and choose "View Page Source" or "Inspect". Find 3 tags you recognise from this lesson.

📝

Lesson quiz — test yourself!

▶

✅

Wrap-up discussion questions

▶

1️⃣ What is the difference between <head> and <body>?

2️⃣ How would you make a heading smaller than <h1> but bigger than <h3>?

3️⃣ Look at a real webpage source — can you find any tags you learned today?