🌳 Think in Structure, Not in Code
Before writing a single line of HTML, great developers do something surprising: they look at the design and think about its structure. Not colors, not fonts — structure.
Every web page is a tree. The browser reads your HTML and builds this tree — called the DOM (Document Object Model). Your job is to describe that tree correctly. That's what HTML is: a language for describing trees.
A Web Page Is a Tree
🎯 By the end of this module, you will:
- Distinguish containers from final elements
- Apply the Cut Method to decompose any design into a DOM tree
- Understand the base structure of every HTML document
- Write valid HTML with proper tags, attributes, and nesting
- Use the 20 most essential HTML tags confidently
📦 Two Categories: Containers & Final Elements
Every visible element on a web page falls into one of two categories. This is the most important idea in this module — once you see it, you can't unsee it.
📦 Containers
Hold other elements inside them. They are branches of the tree — they exist to organize and group.
🍃 Final Elements
Display actual content — text, images, links, buttons. They are leaves of the tree — nothing lives inside them.
<p>, or if a <div> contains only text with no children. The browser will try to render it anyway. But just because it works doesn't mean it's correct. As developers who do things the right way, we always respect the roles: containers contain, final elements display. Clean structure = fewer bugs, better accessibility, easier maintenance.
Spot the Categories
📄 The Document Base
Every HTML document has the same skeleton. Think of it as the trunk and first two branches of your tree — they're always there, before any content:
The HTML Skeleton Tree
<html>
The root. Everything lives inside it. Always the top of the tree.
<head>
Invisible metadata: page title, character set, external stylesheets, SEO tags. The browser reads it, but the user never sees it.
<body>
Everything the user sees goes here. This is where you'll build your tree — all visible content lives inside <body>.
<body>.
✂️ The Cut Method
The Cut Method is an approach I developed to teach my students how to think in structure before writing a single line of code. It's a recursive algorithm for turning any visual design into a DOM tree — and it works for any page, simple or complex.
The Algorithm
Start with the whole page (or any sub-region).
Can you draw horizontal lines that separate the region into distinct groups?
Can you draw vertical lines that separate the region into distinct groups?
🎴 Worked Example 1: A Profile Card
Let's apply the Cut Method to a simple component — a profile card. Watch the cuts appear and the tree build itself.
Design
DOM Tree
Click "Next" to start the Cut Method on this profile card.
🌐 Worked Example 2: A Full Page
Now let's scale up. Here's a typical webpage with a header, hero section, three feature columns, and a footer. The Cut Method handles it all.
Design
DOM Tree
Click "Next" to start the Cut Method on this full page.
✏️ Practice: Build the Tree
Your turn! Look at each design below and build its DOM tree using the Cut Method. Drag elements into the correct position in the tree.
Exercise 1: Blog Post
- ↳ Drop root element here
Exercise 2: Navigation Bar
- ↳ Drop root element here
Exercise 3: E-Commerce Product Card
- ↳ Drop root element here
🏗️ HTML Syntax: Writing the Tree
You now know what to build (the tree). Let's learn how to write it. HTML uses tags — small text labels wrapped in angle brackets — to describe every node of the tree you designed with the Cut Method.
🔬 Anatomy of a Tag
Every HTML element is written with tags. A tag is a keyword wrapped in angle brackets < >. Most elements use two tags — one to open, one to close — with the content in between.
The opening tag is everything from <p to >, including any attributes. The closing tag is always </tagname>. Together they form the element.
The keyword tells the browser what this element is: p = paragraph, h1 = heading, div = generic container.
Extra info inside the opening tag. Usually name="value" format: class="intro", href="...". Some are boolean (no value needed): disabled, required, hidden.
What goes between the opening and closing tags: text, or other nested elements (children in the tree).
Same tag name with a / slash: </p>. Tells the browser "this element ends here." Forgetting it is the #1 beginner mistake.
🍃 Void Elements (No Closing Tag)
Some elements never have children or text content — they are void (empty) by nature. In HTML5, they simply have no closing tag. In your tree, these are always final elements (leaves 🍃).
<img src="photo.jpg" alt="A sunset">
Displays an image. src = where, alt = description.
<br>
Line break. Forces text to the next line.
<input type="text" placeholder="Name">
A form field. The user types inside it.
<hr>
Horizontal rule. A visual separator line.
<img> can't contain a paragraph. An <input> can't contain a heading. They are always leaves in the tree.
🌳 Nesting: Tree → Code
This is the key concept: every container in your tree becomes a pair of opening + closing tags. Its children go inside. Every level of nesting = one level of indentation.
<nav> <img src="logo.png" alt="Logo"> <ul> <li><a href="/">Home</a></li> <li><a href="/about">About</a></li> <li><a href="/contact">Contact</a></li> </ul> </nav>
<p>Hello</p>
<img>, <input>
📄 The Full Page Skeleton
Every HTML page follows the same skeleton. Here's the tree, then the code that writes it:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>My Page</title> </head> <body> <!-- your tree here --> </body> </html>
Not a tag — a declaration. Tells the browser to render in standards mode. Always first line.
The root container. The lang attribute tells the browser the page language.
Invisible metadata: page title, links to CSS files. Users never see this section.
Tells the browser how to read characters (accents, emoji…). Always include it.
Everything visible on the page. Your entire tree from the Cut Method goes here.
Open this example in our playground — edit the code and see the result update live.
📋 Module Summary
Every web page is a tree. The browser builds it from your HTML. Your job: describe the tree correctly.
Containers hold other elements (branches). Final elements display content (leaves).
Horizontal cuts → column layout. Vertical cuts → row layout. Recurse until you reach final elements.
<html> → <head> + <body>. All visible content goes in <body>.
Opening tag + content + closing tag. Attributes add info. Void elements have no closing tag.
33 tags in 5 groups — structure, text, media, forms, tables — cover 90% of everything you'll build.