Headings organize content into meaningful sections. Their level should reflect document structure rather than the desired font size.
Before you start
You should be comfortable with semantic HTML, CSS selectors and browser developer tools. Reproduce the scenario in a small page before adding framework code. Inspect both visual appearance and keyboard or accessibility behavior; a correct screenshot alone is not sufficient evidence.
The practical goal is to reason through this situation: A guide uses one main title with second-level sections and third-level subsections. Read the walkthrough first, then try the interview exercise before opening its answer. The important part is explaining the decision and its consequences, rather than remembering a definition alone.
Step-by-step walkthrough
Step 1: Outline the argument
Identify the article title, major sections and subsections before choosing heading elements.
Step 2: Assign semantic levels
Use h1 for the page title, h2 for major sections and h3 within those sections.
Step 3: Style independently
Adjust font size and spacing in CSS while keeping the level matching document structure.
Worked scenario
A guide uses one main title with second-level sections and third-level subsections.
A guide’s ‘State management’ section is h2; ‘Reducer transitions’ inside it is h3. Making the subsection visually larger for emphasis does not promote it to a new document-level section. Card labels that merely name links need not become headings if they do not introduce actual sections.
Common mistake
Choosing h4 merely because it looks smaller breaks the outline.
Verify the behavior
Read the heading list without the body. It should provide a coherent outline rather than a list determined by font sizes.
Interview exercise
Style a section title differently.
Answer and reasoning
Keep its correct semantic heading level and change visual presentation with CSS.
Continue learning
Compare the scenario with the HTML and CSS interview questions and test your understanding with the HTML and CSS MCQs. For terminology and implementation details, consult the reference material.