← All lessons

Lesson 2 · HTML

Document Structure

~20 min

1. The 4 required parts

Every page has the same shell. Copy this template for every new file:

<!DOCTYPE html>  <!-- HTML5 -->
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Page</title>
</head>
<body>
  <h1>Visible content here</h1>
</body>
</html>

2. Head vs Body

  • <head>: invisible — title (browser tab), meta charset/viewport, links to CSS/fonts, SEO description
  • <body>: visible — everything users see

Common mistake: putting <h1> inside <head> — it won't show. Keep visible tags in <body> only.

3. Try it

Change <title> to your name, save, and watch the browser tab update. Add <meta name="description" content="My first HTML page"> inside head — this helps Google understand your page.

Interactive Practice

Practice: Document Structure

Try the examples in your editor and check off when done.

0% complete
Check when done
Quiz

Test Your Understanding

1. Which tag wraps all visible content?

2. What does <!DOCTYPE html> do?