Lesson 02 · First page

The shape of an HTML document

Every complete web page is built on the same skeleton: a doctype line, then one html element holding two parts. The head carries information about the page, such as its title and character set, and is never drawn. The body holds everything you see. Follow a ten-line page as the browser reads it and watch the boxes nest inside each other to form a tree.

9 min10 steps5 questionsBeginner

Fig 2 · Interactive

Loading figure…

or ← →

Check yourself

5 quick questions

Pick an answer to see why. Your score saves with your progress.

01Which two elements sit directly inside the html element, in this order?

The HTML standard says html holds a head element followed by a body element: one of each, head first.

02You add <p>Opening hours: 8 to 5</p> to your page. Where must it go to be shown?

Everything drawn on the page belongs in the body. The head only holds information about the page, and nothing in it is drawn.

03What does <meta charset="utf-8"> do?

It declares the character encoding. UTF-8 can store every character in Unicode. It is a void element, so it has no closing tag.

04In the page from the figure, how are head and body related?

Both sit directly inside html, so html is their parent and they are siblings of each other.

05What is <!DOCTYPE html>?

The doctype is not an element. It goes first and switches the browser to standards mode instead of quirks mode.

Key terms

Glossary

Doctype: The first line, <!DOCTYPE html>. Not an element: it tells the browser to use today's rules (standards mode).
Root element: The element that holds all the others. In an HTML page it is html.
head: The part of the page that holds information about it (metadata), such as the title and character set. Not drawn on the page.
body: The part of the page that holds everything you see: headings, paragraphs, links, images.
Metadata: Information about the page rather than content on it, such as its title or character encoding.
Character encoding: The rule for turning a file's bytes into letters. Web pages use UTF-8, set with <meta charset="utf-8">.
Void element: An element with no content and no closing tag, such as meta.
Parent, child, sibling: Words for the page's tree: an element is the parent of the elements directly inside it, those are its children, and children of the same parent are siblings.

Fine print

Notes and sources

The file on the card is a complete, valid page. Save it as index.html, open it in any browser and you get the page shown: My page on the tab and Hello! on the page.
Indenting is only for people. The browser ignores the spaces at the start of a line, so the page looks the same without them; the indents just make the nesting easy to see.
The HTML standard says the character set must be UTF-8 and its meta tag must sit within the first 1024 bytes of the file, so put it first in the head.
The HTML standard lets you leave out the html, head and body tags, and the browser creates those elements anyway. Most style guides still write them, and the lang attribute needs the html tag to sit on.
The browser reads the whole file and builds the tree almost at once. The figure builds one part per step so you can follow it.

Quiz Unlocks after the last step.