Lesson 2 of 18

HTML Structure 📄

🎯 Grades 9–12 ⏱ ~35 minutes 💚 Intermediate

What You'll Learn

Write a valid HTML document from scratch
Understand DOCTYPE, html, head, and body
Use VS Code to edit and open HTML files

The HTML Skeleton

Every HTML page starts with the same basic structure. Open VS Code, create a new file called index.html, and type this:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My First Page</title>
</head>
<body>
  <h1>Hello, World!</h1>
  <p>This is my first web page!</p>
</body>
</html>

Save the file, then open it in Chrome by double-clicking it. You should see your heading and paragraph!

Breaking It Down

<!DOCTYPE html> — tells the browser this is an HTML5 document
<html lang="en"> — the root element. Everything goes inside here.
<head> — invisible section with metadata: page title, CSS links, fonts
<meta charset="UTF-8"> — supports all characters including emojis!
<title> — the text shown in the browser tab
<body> — everything the user sees goes here

💡

Get VS Code

Download Visual Studio Code (code.visualstudio.com) for free. It is the most popular code editor in the world. Install the Live Server extension to auto-refresh your page as you type!

📄">Your First Page

Create index.html with the structure above. Change the title to your name. Change the h1 and p to say something about yourself. Open it in your browser!

Quick Check

Where does the visible page content go?

AInside head

BInside html

CInside body

What does the title element control?

AThe main heading on the page

BThe text shown in the browser tab

CThe background color

What does DOCTYPE html tell the browser?

AThat the page has no CSS

BThis is an HTML5 document

CThat JavaScript is disabled