2. Headings & text

Giving your page structure and meaning

Headings organise a page into a clear hierarchy, and text elements add meaning to the words themselves. They help readers - and search engines - understand what matters most.

<h1> to <h6> create six levels of heading. <h1> is the most important and largest; <h6> is the least important and smallest.
Use exactly one <h1> per page - it should describe what the page is about.
<p> marks a paragraph of text. Browsers add space above and below it automatically.
<strong> marks text as having importance (browsers usually make it bold). <em> marks text as having emphasis (browsers usually make it italic).
<br> forces a line break inside a paragraph, without starting a new paragraph.

Try it: a heading hierarchy

Copy this into a new file called index.html and open it in a browser:

Notice how the <h1> is the page's main title, the <h2>s are its two sections, and each <h3> nests one level below its section. The word "Important" looks bold (<strong>) and "gently" looks italic (<em>).

Key points

Headings run <h1> (most important) down to <h6> (least important) - and they get smaller as the number gets bigger.
Use one <h1> per page; skip levels only when it makes sense (for example, an <h3> belongs under an <h2>, not directly under an <h1>).
<strong> = important (bold), <em> = emphasis (italic). They carry meaning, not just looks.

Exercises

Exercise 1 - Build a page with three headings

Preparation: re-read "Giving your page structure and meaning" above.

Write a complete page titled "My hobbies". It needs one <h1> and two <h2> headings, with one short <p> under each <h2>.

Try it in: save as index.html and open in a browser, or use CodePen / VS Code. Starter: <h1>My hobbies</h1>

Hint 1 - direction

The <h1> is the page's main title; each <h2> starts a section below it.

Hint 2 - partial solution

Your structure is <h1>, then <h2> + <p>, then another <h2> + <p>.

Hint 3 - full solution

Check your work: the tab reads "My hobbies", the page shows one <h1>, and each <h2> has a paragraph under it.

Exercise 2 - Choose strong or em

Preparation: recall that <strong> marks importance and <em> marks emphasis.

Rewrite these two sentences, wrapping the right words so each carries the correct meaning: "Do not press this button" (the word "not" is the crucial warning) and "I said left, not right" (the word "left" is being stressed).

Try it in: your editor, then reload the page in the browser.

Hint 1 - direction

One needs <strong> and the other needs <em>.

Hint 2 - partial solution

A safety warning is important (<strong>); correcting someone's word is emphasis (<em>).

Hint 3 - full solution

<p>Do <strong>not</strong> press this button.</p> and <p>I said <em>left</em>, not right.</p>

Check your work: "not" renders bold (strong) and "left" renders italic (em), because importance and emphasis are different ideas.

Exercise 3 - Predict the heading sizes

Preparation: re-read the key point about the heading hierarchy.

Without running it, predict: in the browser, which will be larger by default - an <h2> or an <h4>? Write your answer and explain why, then test it to confirm.

No code needed - answer in a sentence, then check in the browser.

Hint 1 - direction

Bigger numbers in the tag mean smaller headings.

Hint 2 - partial solution

Compare their positions in the <h1>…<h6> list.

Hint 3 - full solution

The <h2> is larger. Heading levels go from <h1> (largest, most important) down to <h6> (smallest, least important), so an <h2> is two steps higher than an <h4>.

Check your work: you predicted the <h2> is larger and the browser confirmed it.

Exercise 4 - Fix a page with no h1 and messy headings

Preparation: note that a page should have one <h1>, and headings should not jump from <h1> straight to <h4>.

A page about a café has no <h1> and its headings are out of order: it uses an <h3> for the menu and an <h4> for the opening times, with nothing above them. Fix it so there is one clear <h1> and the levels follow in order.

Try it in: your editor, then reload the page in the browser. Starter: <h3>Menu</h3> … <h4>Opening times</h4>

Hint 1 - direction

Add an <h1> for the café name, then make each section a <h2>.

Hint 2 - partial solution

The <h1> becomes "The Corner Café", and both "Menu" and "Opening times" become <h2>s.

Hint 3 - full solution

Check your work: the page has exactly one <h1> and both section headings are now <h2>s - no level is skipped.