The Skeleton Every Page Has
Every page on the internet starts with the same dozen lines, and each one is doing a job you can name. Then see the same markup as a tree, because that is what the browser turns it into and what CSS selects from.
Every page on the internet starts with the same dozen lines, and each one is doing a job you can name. Then see the same markup as a tree, because that is what the browser turns it into and what CSS selects from.
doctype is not a tag, and is not optional
The first line of every page is this, and it is not an element — it has no closing tag, holds nothing, and is not part of the tree.
<!doctype html>It answers one question for the browser: which set of rules am I using? Present, the browser uses standards mode — the modern, specified behaviour. Absent, it falls back to quirks mode, which emulates bugs from Internet Explorer 5 so that pages from 1998 still render.
Older doctypes were long and unreadable. HTML5 reduced it to those fifteen characters, and they are all any page needs now.
head is about the page; body is the page
Under the doctype, one html element contains exactly two children, and the split between them is the cleanest division in HTML.
<!doctype html><html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>My site</title> <link rel="stylesheet" href="styles.css"> </head> <body> <h1>Everything visible goes here</h1> </body></html>The root. Everything is inside it. The lang attribute tells screen readers which language to pronounce, and translation tools whether to offer.
Information ABOUT the page. Nothing here is drawn: the title, the character encoding, links to stylesheets, metadata for search engines and social previews.
The page itself. Every heading, paragraph, image, and link the visitor sees is in here.
lang is one attribute to add. Without it a screen reader may read English with a French pronunciation model, which is not a subtle degradation — it is unintelligible.
The four things that belong in head
Head can hold a great deal. Four things belong in every page you write, in this order.
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Page name — Site name</title><link rel="stylesheet" href="styles.css">Which character encoding. utf-8 covers every writing system on earth. Omit it and accented letters, curly quotes, and every non-Latin script turn into mojibake. Put it FIRST — the browser must know the encoding before it reads anything else.
Without this, a phone renders your page at 980 pixels wide and zooms out, so everything is tiny and your small-screen media queries never fire. Chapter 19 explains how to make the layout respond.
The browser tab, the bookmark name, and the blue headline in search results. Not shown on the page. Specific first, site name second — a tab reading only your site name is useless with twelve tabs open.
Your stylesheet. rel says what kind of relationship, href says where. This is a void element; there is no closing tag.
Your markup becomes a tree
The browser reads your file top to bottom and builds a structure out of it. That structure is the DOM — the Document Object Model — and from this point on it is what everything else operates on.
index.html — what you type
the DOM — what the browser builds
em
A child of p, a DESCENDANT of body, and not a child of body. `body > em` matches nothing; `body em` matches this. That distinction is a whole CSS chapter.
Indentation in your file is only a convention — the browser ignores it entirely and builds the same tree from one long line. What creates the nesting is which tags close before which others.
The two panels are the same information. Your indentation is a convention the browser ignores completely; what creates the nesting is which tags close before which others. Write the whole file on one line and you get an identical tree and an unreadable file.
Parents, children, and siblings are CSS vocabulary
The tree comes with family words, and they are not decorative — CSS selectors are built from them and so is every explanation of why a style did not apply.
The element directly containing this one. Every element has exactly one, except html, which has none.
An element directly inside. head and body are both children of html.
Inside at ANY depth — child, grandchild, and further. Every element in a page is a descendant of html.
Shares a parent. head and body are siblings; so are two paragraphs in the same section.
Any element that contains this one, at any depth. The reverse of descendant.
The child-versus-descendant distinction is the one to hold onto. In chapter 12, main > a means "an anchor that is a direct child of main" and main a means "an anchor anywhere inside main". Those select different elements, and picking the wrong one is the most common reason a rule appears to do nothing.
Key takeaways
- <!doctype html> is line one of every page. It is not an element and is not optional.
- Without it, quirks mode changes the box model, so your layout differs from every example you read.
- html has exactly two children: head, which is about the page, and body, which is the page.
- lang on html tells screen readers how to pronounce your words.
- charset utf-8 goes first, before anything the browser has to decode.
- The viewport meta tag is what makes a phone render your page at its real width — without it your small-screen media queries never fire.
- title is the tab, the bookmark, and the search headline. Specific first, site name second.
- The browser turns your markup into a tree called the DOM. Your indentation is ignored.
- Parent, child, descendant, sibling, ancestor — these are CSS selector vocabulary, not jargon.
- Child means one level down. Descendant means any depth. That difference breaks more selectors than anything else.
Before you move on
Quick check
Answer these to unlock the next chapter: 3 of 4 to pass. You can retake it anytime.
Make a free account to read on
Every chapter is free — an account lets your course progress follow you from your laptop to your phone. No payment, no trial.