Lesson 03 · First page

Headings, paragraphs and lists

Most of the text on any web page is headings, paragraphs and lists. Follow an eleven-line recipe page as the browser draws it: a main heading, a paragraph whose extra spaces vanish, a bulleted list, a section heading and a numbered list the browser counts for you. Then see how headings form the page's outline, and how one changed tag turns numbers into bullets.

8 min9 steps5 questionsBeginner

Fig 3 · Interactive

Loading figure…

or ← →

Check yourself

5 quick questions

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

01Your file says <p>Hello world</p>, with six spaces between the words. What does the page show?

The browser collapses any run of spaces, tabs and line breaks into a single space, so the six spaces show as one.

02You want a list of steps where the order matters. Which element holds it?

ol is an ordered list: the browser numbers its items 1, 2, 3 itself. ul is for items whose order does not matter, and li is each item inside either list.

03Which of these is a correct list?

A ul or ol holds only li elements, one per item. Text or paragraphs go inside an li, never straight inside the list.

04A heading looks too big as an h2. What should you do?

Pick the heading level by its place in the page's outline. Size is a job for CSS (font-size). Screen-reader users rely on the levels to move around the page.

05You change <ol> and </ol> to <ul> and </ul> and leave the li items alone. What changes on the page?

The list's own tag decides the markers: ol is numbered, ul is bulleted. The li items stay exactly the same.

Key terms

Glossary

Heading: A title for the page or a section of it, written with h1 to h6. h1 is the page title; each lower level is a part of the one above.
Paragraph: A block of running text, written with p. It starts on a new line, with a little space above and below.
Block element: An element that starts on a new line and takes the full width available, such as a heading, a paragraph or a list.
Whitespace collapsing: What the browser does with spaces, tabs and line breaks in normal text: any run of them shows as a single space.
Unordered list (ul): A list whose order does not matter. Browsers draw a bullet before each item.
Ordered list (ol): A list whose order matters, such as steps. Browsers number the items themselves.
List item (li): One item inside a ul or ol. The lists may hold only li elements.
Outline: The shape of a page given by its headings alone: the h1, its h2 sections, their h3 parts, and so on.

Fine print

Notes and sources

The card shows only what goes inside <body>. A full page wraps it in <!DOCTYPE html>, <html>, <head> (with a <title>) and <body>.
The browser reads the whole file and draws the page almost at once. The figure draws one element per step so you can follow it.
Bold, 2em and 1.5em headings, paragraph spacing, list indents, bullets and numbers are the browser's default styles (HTML Living Standard, Rendering). CSS can change every one of them.
Headings go down to h6. Use one h1 for the page title, then h2 for sections, h3 for parts of a section, and so on, without skipping a level.
A ul or ol may hold only li elements (plus script and template). Put any other content inside an li. Lists can nest: a whole ul can sit inside an li.
The card is real HTML. Save it as recipe.html, open it in any browser and you get the page shown.

Quiz Unlocks after the last step.