Page structure: head and body — HTML and CSS for kids

Code tip

Head for the browser, body for you — “the head describes the page; the body holds what you see”

1. <!DOCTYPE html> first, then <html> with <head> and <body> inside.
2. The head holds <title> (shown on the browser tab), <meta>, <style> and <link>.
3. The body holds everything you see on the page.

Use it for: Starting every new web page, and fixing a page whose title or styles do not show.

Worked example: 📄 What does the browser tab show for this page?
<!DOCTYPE html>
<html>
<head>
  <title>Riya’s Recipes</title>
</head>
<body>
  <h1>All about me</h1>
  <p>Mars is red.</p>
</body>
</html> → Riya’s Recipes

✏️ Practice

Work it out in your head or on paper, type the answer and press Check. Stuck? Press “Show me how”.

🏁 Lesson 8 test

20 questions. Check each answer, then go to the next one. Get 16 or more right to pass.

🏅 Sign in with Google to earn the 🦴 Page Skeleton Builder badge when you pass — and a certificate when you finish all 10 lessons of Part 1 · HTML Basics. You can still take the test without signing in.

🖨️ HTML Worksheet: Page Structure

• Worksheet set 1 (PDF)
• Worksheet set 2 (PDF)
• Worksheet set 3 (PDF)