How should headings describe a page hierarchy?

[HTMLCodeRunner Editorial]

The design uses three heading sizes but the content has two nested section levels.

[HTMLCodeRunner Editorial]

Detailed answer

A practical page has a clear main heading and uses lower levels for nested sections.

Select levels by structure instead of font size; CSS controls appearance. A heading should summarize what follows. Heading structure makes a long reference page easier to scan and navigate without depending on visual size alone.

Example

<h1>HTML forms</h1>
<h2>Contact details</h2>
<h3>Email address</h3>

Understanding the behavior

Heading levels communicate nesting rather than a preferred font size. A page heading can introduce sections with h2 headings and subsections with h3 headings. CSS should control the appearance independently of that hierarchy.

Practical implementation notes

Read only the headings in order. They should form a useful outline, avoid vague repeated labels, and describe what each section contains. Do not choose a lower level simply because it looks smaller.

How to check it

Write the outline first, then style heading sizes without changing their structural levels.

Expected result

The heading list reads like an understandable outline of the page.

Watch out: A bold paragraph is not exposed as an actual heading.

Read the reference ↗

[Author]

Posts