Curriculum ▸ HTML Zero → Mastery ▸ Lesson 5: Your First index.html Foundations

Lesson 5 — Your First index.html Boilerplate & Basics

Estimated time: 35–50 minutes · You’ll build a correct boilerplate, add content, preview locally, and validate

Learning Goals

Validate this page

Part 1 — What index.html Means

index.html is the default file name web servers and browsers look for inside a folder. If a folder is your site root, index.html becomes the homepage.

Tip: Keep your project folder tidy: one folder per lesson, with subfolders like images/, css/, js/ when needed.

Part 2 — Create the Project & File

  1. Create a folder named lesson-05.
  2. Inside it, create a file named index.html.
  3. Open it in your editor (VS Code). Optionally start Live Server.

Part 3 — Minimal Boilerplate

Paste this into lesson-05/index.html:

<!DOCTYPE html> <!-- standards mode -->
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>My First Page</title>
</head>
<body>
  <h1>Hello, world!</h1>
  <p>This is my very first HTML page.</p>
</body>
</html>
What each part does
  • <!DOCTYPE html> — enables modern standards mode.
  • <html lang="en"> — root element + document language.
  • <meta charset="UTF-8"> — use Unicode (covers emojis & symbols).
  • <meta name="viewport"> — responsive layout on mobile.
  • <title> — tab/bookmark label.
  • <body> — visible page content.
Live Preview (inline)

Part 4 — Add Real Content

Below your first paragraph, try these:

<h2>About Me</h2>
<p>I’m learning HTML. It’s fun!</p>

<!-- A horizontal rule as a divider -->
<hr>

<h2>Fun Facts</h2>
<p>I like coding.<br>I also like music.</p>

<!-- Comment: this note is for me only; it won't show on the page -->
Whitespace: Browsers collapse multiple spaces and newlines. Use paragraphs, <br> for line breaks (sparingly), and <hr> for thematic breaks.

Part 5 — Open, Save, Refresh

Part 6 — Validate & Fix Common Mistakes

Practice Tasks

  1. Create sections for “About”, “Hobbies”, and “Goals” using headings and paragraphs.
  2. Add a comment describing what you’ll learn next.
  3. Insert a horizontal rule between sections.
  4. Validate, fix issues, and re-run the validator.

Quick Quiz

  1. Why is the file named index.html special?
  2. What does <!DOCTYPE html> do?
  3. Where should <meta charset="UTF-8"> go and why?
  4. What’s the difference between <br> and starting a new <p>?
Sample answers
  • Servers/browsers look for it by default as the folder’s homepage.
  • Enables standards mode (modern rendering rules).
  • Inside <head>, so the parser knows the encoding early.
  • <br> forces a line break inside the same paragraph; a new <p> is a separate block.

Lesson 5 Dictionary

Terms and elements that appear in this lesson.

Boilerplate
The minimal, standard structure of an HTML document you start from.
<body>
The container for all visible content of the page.
charset (meta)
Declares the document character encoding, e.g., <meta charset="UTF-8">.
<!-- comment -->
A note for authors that does not appear on the page.
<!DOCTYPE html>
Triggers standards mode so the browser uses modern rules.
DevTools
Built-in browser tools to inspect DOM and debug pages.
<head>
Container for document metadata (title, meta tags, links).
Heading
Section title elements (<h1>…<h6>) establishing outline.
<hr>
A thematic break (horizontal rule) between content sections.
<html>
Root element that wraps the entire document.
index.html
The default file name browsers/servers load in a folder (homepage).
lang (attribute)
Specifies the language of the content (e.g., <html lang="en">).
Live Server
Editor extension that serves your page locally and auto-reloads on save.
<meta>
Metadata declarations (charset, viewport, etc.) inside <head>.
<p>
A paragraph block for text content.
Refresh
Reload the page in the browser to see saved changes (if not using Live Server).
Validator (W3C)
A tool to check HTML for errors and best-practice conformance.
Viewport (meta)
Controls the layout viewport on mobile (e.g., width=device-width, initial-scale=1).