HTML Zero → Mastery — Lesson 1: What is HTML?

Learning Goals

Understand what HTML is and why it matters.
Learn the basic building blocks of an HTML page.
Build and open your first page in a browser.

Part 1 — The Concept

HTML (HyperText Markup Language) is the language that gives structure to web pages. Think of it like the skeleton of a house. It tells the browser what things are: a heading, a paragraph, a list, or an image.

By itself, HTML doesn’t make pages look pretty—that’s what CSS does. And it doesn’t make pages interactive—that’s what JavaScript does. HTML is the foundation everything else sits on.

Key idea: HTML = structure, CSS = style, JS = behavior.

Part 2 — Minimal Document

Every valid HTML page begins with a few required parts. Let’s look at the smallest complete example and break it down:

<!DOCTYPE html>
<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, HTML!</h1>
    <p>This is my first web page.</p>
  </body>
</html>

<!DOCTYPE html> → tells the browser to use modern HTML rules.
<html lang="en"> → wraps the whole page, declaring language (good for accessibility).
<head> → contains information about the page, not shown directly.
<title> → text shown in the browser tab or bookmark.
<body> → everything visible on the page (headings, paragraphs, images, etc.).

Part 3 — Common Elements

Here are a few tags you’ll use often:

Headings: <h1> to <h6>. Use one <h1> per page for the main title, smaller levels for subsections.
Paragraphs: <p> for blocks of text.
Line break: <br> (use sparingly—better to start a new paragraph).
Horizontal rule: <hr> to separate sections.
Emphasis: <em> (italic), <strong> (bold/important).

Part 4 — Quick Exercise

Create a folder called lesson-01.
Create index.html and paste the minimal document code.
Change the <title> and <h1> to your name.
Add a new <p> saying why you want to learn HTML.

Quick Quiz

What is HTML’s main job?
Which language controls the page’s appearance?
What’s the difference between a tag and an element?

Glossary

Tag — The keyword in angle brackets, e.g., <p>.
Element — A complete piece: opening tag, content, closing tag.
Attribute — Extra info added to a tag (like src or alt).

Common Mistakes (and Fixes)

Forgetting <!DOCTYPE html> → may trigger quirks mode.
Nesting tags incorrectly → e.g., don’t put <h1> inside a <p>.
Writing tags in uppercase → works, but modern style is lowercase.