Heading and Sectioning Algorithms

Semantic HTML uses headings and sectioning elements to express the structure and relationships of a document. For modern frontend work, do not rely on the old HTML outline model; use appropriate sectioning elements and heading levels that make the hierarchy explicit.

Sectioning content includes elements such as `article`, `section`, `nav`, and `aside`. These elements represent distinct sections of a document, while `h1` through `h6` provide headings that label content within that structure. Elements such as `header` and `footer` provide structural regions but do not themselves create sections in the same way.

A heading's level communicates its relative rank. `h2` normally represents a subsection under an `h1`, and `h3` can represent a subsection under an `h2`. The exact visual appearance should be controlled with CSS rather than choosing a heading element merely because its default font size looks appropriate.

The historical HTML outline algorithm led developers to believe that nesting sectioning elements would automatically produce a reliable heading hierarchy for browsers and assistive technologies. That assumption is unsafe: the proposed outline behavior was not broadly implemented, so authors should make the heading hierarchy explicit with actual heading elements.

A `section` should generally have a heading when it represents a meaningful standalone section. Use `div` when there is no semantic section to communicate. For repeated or independently distributable content, `article` is often more appropriate; `nav` identifies major navigation links, while `aside` identifies tangential content.

For accessibility, the important goal is a coherent document structure that users can navigate by headings and landmarks. Do not manufacture structure with heading tags used only for styling, and do not assume that nesting a `section` automatically makes an otherwise missing heading unnecessary.

Key points

• Use `h1`–`h6` to communicate heading rank explicitly.
• Use `section`, `article`, `nav`, and `aside` for their intended semantic roles.
• Do not depend on the historical HTML outline algorithm to infer heading structure.
• Choose heading elements for document hierarchy, not their default visual size.
• Use CSS for presentation and headings for semantic structure.

Interview questions

What is the relationship between HTML headings and sectioning elements?

Sectioning elements such as `section` and `article` define meaningful regions of a document. Heading elements such as `h1` through `h6` provide names and hierarchical rank for those regions. A section does not become properly structured merely because it is nested inside another section. Authors should provide explicit headings when a section needs a heading.

Is the HTML outline algorithm something you should rely on?

No. The historical outline model suggested that nested sectioning elements could determine document hierarchy automatically. In practice, browsers and accessibility tooling have not consistently implemented that model as an automatic heading hierarchy. A frontend engineer should therefore use explicit `h1`–`h6` elements and appropriate sectioning elements instead of relying on inferred outlines.

When would you use `section` instead of `div`?

Use `section` when a group of content forms a meaningful thematic section of the document. Such a section will commonly have a heading that identifies its purpose. Use `div` when the grouping exists mainly for styling, scripting, or layout and has no corresponding semantic section. The choice should be based on meaning rather than on default browser styling.

Can a page contain more than one `h1`?

HTML does not impose the old rule that a document may have only one `h1`. Multiple `h1` elements can be valid when they accurately represent the structure of the document, particularly when independently structured content is involved. However, a clear and predictable heading hierarchy is important for users and assistive technologies. In practice, teams should establish a consistent heading strategy rather than using multiple `h1` elements casually.

Why shouldn't developers use heading elements just to get larger text?

Heading elements communicate document structure, not just typography. Screen readers and other accessibility tools can expose headings as navigation targets, so choosing `h2` because it looks the right size can create a misleading structure. If text needs to look larger or smaller, CSS should provide that presentation. The heading level should instead reflect the content's place in the document hierarchy.