Understand the idea

Headings name sections. Paragraphs group related sentences. Their meaning remains useful when a reader changes the font, uses a screen reader, or removes your stylesheet.

Use h1 for the page's main heading and h2 for its major sections. A subsection within one of those sections can use h3. Choose the level by structure, then control the appearance with CSS. A p element cannot contain a section or another paragraph: the parser may close it before you expect.

Read the example

This is an HTML fragment. Place it inside the body of a complete HTML document, unless the example explicitly identifies head content.

HTML · EXAMPLE
<h1>My photography journal</h1>
<p>Notes from walks with my camera.</p>
<section>
  <h2>Along the river</h2>
  <p>The light changed just before sunset.</p>
  <h3>What I noticed</h3>
  <p>Reflections made familiar buildings feel new.</p>
</section>

A small mistake, explained

What goes wrong

Using h4 because its default size looks right gives the document an outline that does not match the content.

How to fix it. Choose the correct heading level first. Apply a class and change font-size if it needs to look smaller.

Try it yourself

Read only the headings of your page. Can you understand its organisation without reading every paragraph?

Further reading

HTML Living Standard — sections

Original explanation and example prepared for HTML code FYI with AI assistance. Test the code in your own context. How these guides are made.