🆓 Free Preview 📖 Notes LESSON 02 OF 32

HTML Document Structure & Boilerplate

⏱️ 18 min

🌐 HTML5 Foundations

The HTML Skeleton

Every webpage has the same basic structure. Learn the boilerplate and what every tag does.

Boilerplate

Every Tag, Explained

📄

<!DOCTYPE html>

Declares this document as HTML5.

🌳

The root element; lang helps screen readers and search engines.

🧠

<head>

Invisible metadata — charset, viewport, title, links to CSS.

👁️

<body>

Everything visible on the page goes here.

A Complete Boilerplate

index.html

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 Website</title>
</head>
<body>
  <h1>Hello, World!</h1>
  <p>My first webpage!</p>
</body>
</html>

💡

Why the viewport meta tag matters

Without width=device-width, initial-scale=1.0, mobile browsers render your page zoomed out to a fixed desktop width — this single line is what makes a page actually responsive on phones.

← Lesson 1: How the Web Works Lesson 3: Headings, Lists & Links →