STEP 2 — HTML ANATOMY: THE SANDWICH & THE TAG

This week you learn the shape of every HTML page and the unit it is built from: the tag. Think of a page as a club sandwich.

How to read this page: first come the instructions — what to do this week, with the video. After the instructions, one gray-blue box gathers all the material for your Step 2 page — rewrite it in your own words. Text shown as `code` is the kind of thing you type onto your page.

INSTRUCTIONS

1 · Watch: how the Web & HTML began

A short history helps everything else make sense. Watch the video, then read the notes below it before you build.

In 1989 Tim Berners-Lee invented the Web and gave it HTML as its publishing language. He based HTML on an older text-marking system called SGML, which is where the idea of paired tags came from — an opening tag and a matching closing tag, like `<title>` and `</title>`. The headings `h1` through `h6` and the paragraph tag `p` trace straight back to that system. Knowing tags generally come in pairs is the single most useful habit you can build this week.

2 · Build your page

Using the sandwich model in the gray-blue box below, build a clean HTML page from scratch: doctype, the `<html>` bread, a `<head>` with a title, and a `<body>`. Then write your Step 2 notes into the body.

MATERIAL FOR YOUR STEP 2 PAGE

Everything inside the gray-blue box below is what you rewrite, in your own words, onto your `step2.html` page.

The page is a sandwich

The two slices of bread are the `<html>` start and end tags — they hold everything else. The fillings are the `<body>`: everything a visitor actually sees on screen.

The metadata is the thinking

Between the bread, before the fillings, sits the `<head>` — the metadata, or information for browsers. A visitor never sees this part on screen, with one exception: the page title, which shows in the browser tab. On top of the whole sandwich sits the `<!doctype html>`, a flag that tells the browser this is a modern HTML page.

Tag anatomy

A tag has three parts: a start tag, the content, and an end tag. The slash is what makes an end tag: `<h1>Welcome</h1>`. About 99% of tags come as a start-and-end pair.

Nesting, and staying linear

A tag can sit inside another tag — but it must close inside it too. Cross your end tags and the page breaks. And HTML is linear: the browser reads your file top to bottom, and content appears on screen in the order you wrote it.

Work Due — Friday, September 18

Build your `step2.html` page — a clean HTML sandwich (doctype, html, head with a title, body) with your own notes on the sandwich model, the head/metadata, tag anatomy, and nesting inside the body. Upload it to your site.