Session 1 — How the web works, and the structure of an HTML page

You will learn what HTML actually is, how a page travels from server to screen, and the anatomy of an element — opening tag, content, closing tag — plus attributes and the <!DOCTYPE html> / <html> / <head> / <body> skeleton every page shares. The course's running example, the Harbor Café website, starts here and grows page by page. You will also build the mental habit of matching closing tags to opening tags and drawing the document tree.

Plan: ideas → worked elements → bridge → short drills → reveal.

Time: about 55–65 minutes if you annotate every snippet element by element before peeking at reveals.

Session 1 — How the web works, and the structure of an HTML page

The one-paragraph story

A web page is a text file written in HTML — HyperText Markup Language — that a browser reads and turns into the page you see. HTML wraps content in elements: an opening tag, content, and a closing tag — write <p> before some words, the words, then </p> after them. Elements can carry attributes that give extra information (a class, a source URL, a link target). Every page begins with the same skeleton — <!DOCTYPE html>, an <html> root, a <head> with invisible metadata, and a <body> holding everything visible. This session explains the request-and-response round trip behind every page load, the anatomy of an element, and the skeleton you will fill in for the rest of this course. The running example throughout the course is a small café website — the Harbor Café — which you will build page by page.

---

How a page actually reaches your screen

When you type an address and press Enter, four actors cooperate:

1. Your browser — the program that requests pages and draws them.
2. The internet — the network that carries your request across servers and routers.
3. A DNS server — the phone book that turns a human-readable name like harborcafe.example into a numeric IP address that identifies a specific computer.
4. A web server — a computer, anywhere in the world, that holds the page files and answers requests with them.

The round trip: your browser asks the DNS server for the IP address of the domain, then asks the web server at that IP for the page file. The server replies with the file (usually HTML, plus CSS and images it references), and the browser renders what it received. Each of those requests and replies is an HTTP request/response pair. You do not need to know the mechanics deeply — but this mental model explains why "the page is slow" is often "the network round trip is slow", and why pages fail when the server is down even though your own computer is fine.

---

What HTML actually is

HTML is a markup language, not a programming language. Programming languages compute; markup describes structure. HTML tells the browser "this is a heading", "this is a paragraph", "this is an image" — and the browser decides how those look by default (headings large and bold, paragraphs normal text). Styling — what things look like — is CSS, which arrives in later sessions. HTML's job is purely the content and its meaning.

---

Elements: the building blocks

An element is made of three parts:

• an opening tag: <p>
• the content between the tags
• a closing tag: </p> (the slash marks it as closing)

<p>Welcome to the Harbor Café.</p>

Read this as: a paragraph containing the words "Welcome to the Harbor Café." The closing tag is what makes the element a container — the browser knows exactly where the paragraph starts and ends.

Empty elements have no content and therefore no closing tag. The line-break element is written alone:

<p>First line<br>second line</p>

The br element forces a line break inside the paragraph. (Because this element is written without a closing tag, this session's prose refers to it as "the br element" rather than writing the tag inline.)

Nesting. Elements can sit inside other elements, but each inner element must close before its parent:

<p>Today's special is <em>salmon chowder</em>.</p>

The em element (emphasis) sits inside the paragraph. Matching open/close pairs — every <p> a </p>, every <em> a </em> — is the single most common place beginners make mistakes. When you read code, match each closing tag to its opening tag before judging the structure.

---

Attributes: extra information on elements

An attribute appears in the opening tag as name="value", separated by spaces:

<p class="intro">Fresh coffee, roasted weekly.</p>
<img src="cafe.jpg" alt="The Harbor Café storefront">

The class attribute gives the paragraph a name that CSS can target later. The img element's src attribute says where the image file lives, and alt gives a text description for screen readers and for when the image cannot load. Rule: an attribute is a name, an equals sign, and a quoted value — and one opening tag can carry several.

---

The skeleton every page shares

A complete, minimal page:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Harbor Café</title>
</head>
<body>
  <h1>Harbor Café</h1>
  <p>Fresh coffee on the waterfront.</p>
</body>
</html>

Read the skeleton top to bottom:

• <!DOCTYPE html> — a one-line declaration, always first, telling the browser "this is an HTML5 document". It is not an element and has no closing tag.
• <html lang="en"> — the root element that wraps the whole document; lang states the page's primary language.
• <head> — invisible metadata. meta charset="utf-8" says the file uses the Unicode character set (so letters like é and 中 render correctly), and <title> is the text shown in the browser tab and used by search engines. Nothing in the head is drawn on the page.
• <body> — everything the user sees: headings, paragraphs, images, forms.

Every page in this course keeps this skeleton and only changes what sits inside <body> (and occasionally the <title>).

---

A picture of the document tree

flowchart TD
    DOCTYPE["<!DOCTYPE html>"]
    HTML["html"]
    HEAD["head"]
    BODY["body"]
    META["meta charset"]
    TITLE["title"]
    H1["h1"]
    P["p"]
    DOCTYPE --> HTML
    HTML --> HEAD
    HTML --> BODY
    HEAD --> META
    HEAD --> TITLE
    BODY --> H1
    BODY --> P

The page is a tree with <html> at the root, <head> and <body> as its two children, and their children hanging below. Browsers build exactly this tree when they parse the file — keeping the skeleton tidy makes that tree match what you intended.

---

Viewing and checking your work

Two practical habits worth building now:

• View source. Any browser can show the raw HTML of a page. When you see something unexpected on a real site, looking at the source is how you discover the element behind it.
• Validate. Pasted into a validator, your HTML gets checked for missing closing tags and illegal nesting. A clean validator result means the browser's tree will match your mental model.

---

Pitfalls to watch for

• Every opened tag must be closed (except empty elements like br and img).
• Attributes belong in the opening tag — img src="cafe.jpg" is correct, img src="cafe.jpg" > is broken, and a closing tag never carries attributes.
• The <head> holds metadata, not visible content. A paragraph in the head is a beginner classic.
• <!DOCTYPE html> is not optional decoration — without it, browsers switch into an older, quirks mode that renders the same CSS differently.

Session 1 — Worked examples

Example A — Annotating a page element by element

Here is the Harbor Café home page, fully written:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Harbor Café — Welcome</title>
</head>
<body>
  <h1>Welcome to the Harbor Café</h1>
  <p>We roast beans on the pier and pour coffee all day.</p>
  <p>Today's special is <em>salmon chowder</em>.</p>
</body>
</html>

Walk it:

1. <!DOCTYPE html> — declares HTML5; always first.
2. <html lang="en"> — the root; lang tells the browser the language is English.
3. <head> — holds <meta charset="utf-8"> (so the é in "Café" and em-dashes render) and <title> (the browser-tab label "Harbor Café — Welcome").
4. <body> — three visible elements: one <h1> heading and two <p> paragraphs.
5. The second paragraph nests the em element around "salmon chowder". Check the closing order: </em> then </p> — inner closes before outer. Correct.

---

Example B — Nesting, right and wrong

<!-- Right: em closes before p -->
<p>Today's special is <em>salmon chowder</em>.</p>

<!-- Wrong: p closes before em — em is left dangling -->
<p>Today's special is <em>salmon chowder.</p></em>

In the wrong version, the browser must guess where the emphasis ends. Modern browsers usually guess tolerantly, but the guess can be wrong — which is exactly why the closing-tag habit matters. Match every </tag> to its opening tag: in the wrong snippet, </p> appears while <em> is still open.

---

Example C — Attributes on an image

<img src="storefront.jpg" alt="The Harbor Café storefront" width="400">

• src — the file path of the image.
• alt — the text read aloud by screen readers and shown if the image fails to load.
• width — the display width in pixels (the browser keeps the aspect ratio if only width is given).

img is an empty element: no content, no closing tag, self-contained. All three attributes live in the opening tag.

---

Example D — The document tree by hand

For the Example A page, write the tree the browser builds:

html
├── head
│   ├── meta
│   └── title
└── body
    ├── h1
    ├── p
    └── p
        └── em

The em hangs under its parent paragraph. Anything you add to the page must attach somewhere in this tree — there is no element that floats outside <html>.

---

Example E — The round trip in words

You type harborcafe.example and press Enter. In order:

1. The browser asks a DNS server: "what IP address hosts harborcafe.example?"
2. The DNS server replies with the address (say 93.184.216.34).
3. The browser sends an HTTP request to the web server at that address: "give me the page at the root".
4. The server sends back the HTML file (the same content as Example A).
5. The browser builds the tree and draws the page.

If step 4 fails (server down), you see an error even though nothing is wrong on your machine. If step 1 fails (no internet), you see a different error — "cannot find server". Naming the step that failed is how you diagnose "the web is broken".