html · level 1 · unit 5 · lesson 1
- meet it
- guess first
- your turn
- fix it
- nailed it
Tap a green word if you get lost.
meet it
Every whole page has the same skeleton.
So far you have written pieces of a page. A whole page starts with . This doctype line tells the browser to expect modern HTML. Then <html> wraps everything else.
Inside <html> are two parts. The holds facts about the page, like its name. Nothing in <head> is shown on the page itself.
The holds everything people see: headings, paragraphs, pictures and lists. <head> comes first, then <body>, and both close before </html>.
<!doctype html>
<html>
<head>
<title>My page</title>
</head>
<body>
<h1>Hello!</h1>
</body>
</html> Press show my page to see it here.
The <title> in the head names the page. You will meet it properly in the next lesson.
guess first
Which words will appear on the page?
Guess before you run it. Wrong guesses are how you learn, and nothing is marked.
<!doctype html>
<html>
<head>
<title>Secret notes</title>
</head>
<body>
<p>Hello, world!</p>
</body>
</html>
your turn
Your turn. Fill the body.
Inside the body on line 7, write an <h1> naming your hobby and a <p> saying why you love it.
Press show my page to see it here.
- the body has a headingnot checked yet
- the body has a paragraphnot checked yet
- the head still holds the titlenot checked yet
fix it
The heading has turned into plain words. Can you fix it?
Press show my page to see it here.
- pet club is a big headingnot checked yet
- the paragraph shows below itnot checked yet
- Pet club is not a heading any more. Which tag comes right before it?
- Look at the opening body tag on line 6. What is missing at its end?
- Add
>after<body, then press run.
nailed it
your page has a proper skeleton. :D
- Whole pages start with
<!doctype html>. <head>holds facts,<body>holds what people see.- Everything else lives inside
<html>.
new words in your collection
- doctype
- head
- body
This lesson isn’t saved. A free account remembers every lesson you finish.