Document Structure and Heading Hierarchy

Use headings in a logical hierarchy to communicate document structure to users and assistive technologies. Semantic heading structure improves navigation, comprehension, and the document's outline without relying on visual styling alone.

HTML headings are `h1` through `h6`, with each level representing a progressively deeper section of the document. The heading element should reflect the section's structural level, not simply the font size or visual appearance you want.

A page commonly has a primary `h1` describing its main subject, followed by `h2` elements for major sections. An `h3` can identify a subsection within an `h2`, and so on. The important principle is that the hierarchy communicates relationships between sections.

Do not choose heading levels merely because their default browser styles look appropriate. Use CSS to control appearance, while the HTML heading level describes structure. Conversely, visually styling a `div` or `span` to look like a heading does not provide the same semantic meaning.

Assistive technologies can use headings as navigation landmarks within a page. A clear hierarchy therefore helps users understand where they are and move between sections efficiently. Avoid skipping levels solely for visual effect, while recognizing that real document structures can vary and should be organized around meaningful section relationships.

Key points

• Use `h1`-`h6` to express document hierarchy.
• Choose heading levels based on structure, not default visual styling.
• Use CSS when a heading needs a different visual appearance.
• Headings provide useful navigation and structure for assistive technology users.
• Keep nested sections logically related to their parent headings.

Interview questions

Why is heading hierarchy important in semantic HTML?

Heading hierarchy communicates the organization of a document to both users and software. Assistive technology can use headings to help users navigate large pages. A logical hierarchy also makes the markup easier for developers to understand and maintain. The levels should represent structure rather than visual size.

When should you use `h1`, `h2`, and `h3`?

Use `h1` for the primary subject of the page or document. Use `h2` for major sections under that subject, and `h3` for subsections belonging to an `h2`. The exact structure should follow the content's relationships rather than the desired visual appearance.

Is it always wrong to skip a heading level?

A heading hierarchy should normally reflect meaningful nesting, so skipping levels can make the structure harder to understand. For example, an `h3` normally represents a subsection within an `h2`. The key concern is semantic organization rather than enforcing a purely mechanical numbering rule. If the content has no intermediate section, reconsider whether the deeper heading level is actually appropriate.

Should a page have only one `h1`?

A common and straightforward pattern is to give a page a primary `h1` and use lower levels for its sections. Modern HTML does not require developers to treat multiple `h1` elements as universally invalid, but relying on multiple `h1`s can make structure less obvious and is often unnecessary. What matters most is that the heading organization clearly represents the document's content hierarchy.

How should you make a heading look different without changing its semantic level?

Keep the heading element that represents the correct structural level and use CSS to control its visual appearance. For example, an `h2` can be styled with a smaller font size if that fits the design. This preserves the semantic meaning while separating structure from presentation.