HTML · The document layer

How should headings be structured on a page?

Easyheadingsdocument outlineaccessibilityUpdated Oct 2026
Quiz this track

Short answer

Headings describe the outline of a page, so they should start at h1 and increase in order without skipping levels. One clear h1 per page and logical nesting help screen reader users navigate and help search engines understand structure.

Headings are not just large text. They are navigation landmarks in the document outline. A screen reader user can list all headings and jump between them, so the order should reflect the actual structure of the content.

html
<h1>Interview preparation</h1>

<section>
  <h2>JavaScript</h2>
  <h3>Closures</h3>
  <h3>Promises</h3>
</section>

<section>
  <h2>HTML</h2>
  <h3>Semantics</h3>
</section>
The heading levels mirror the content hierarchy.

Practical rules

  • Use one h1 that describes the page's main topic
  • Do not skip from h1 to h4 to get a smaller font; use CSS for size
  • Each section should usually begin with a heading
  • Do not use headings for labels, captions or visual decoration
  • Keep heading text descriptive when read out of context

There is some flexibility: multiple h1 elements are technically allowed, especially in older sectioning models, but a single clear h1 is the most predictable choice. The important part is a logical sequence.

Heading level and visual size are separate concerns. Choose the level for structure, then style it with CSS.

Follow-ups you should expect

Interviewers use these to check whether the first answer was understanding or memorisation.

  1. 1Can a page have more than one h1?
  2. 2Why is skipping heading levels a problem?
  3. 3Should headings be used for styling text?
  4. 4How do screen readers use headings?

Say it in the interview

Headings form the outline of the page, so I start with one h1 for the main topic and then use h2 and h3 in order without skipping levels. Screen reader users can jump through headings, so the sequence needs to match the content structure. I never pick a heading level just because I like its size; that is a CSS concern. Descriptive heading text also helps when headings are read out of context.

Use this as a model, not a script. Saying it in your own words is what makes it survive follow-up pressure.

Related questions

Reading is step one

Now say it out loud.

Understanding an answer and delivering it under pressure are different skills. Rehearse this topic in a live HTML mock interview and get scored feedback on depth, clarity and confidence.