Heading hierarchy is correct

Screen reader users navigate pages by jumping between headings — it is their primary orientation mechanism on unfamiliar content. A missing <h1> leaves no entry point. Heading levels that skip (h1 directly to h3) break the expected hierarchy, causing confusion about content relationships. WCAG 2.2 SC 1.3.1 (Info and Relationships) requires structural information to be programmatically determinable, and SC 2.4.6 (Headings and Labels) requires headings to describe their section. Improper heading structure also confuses search engine crawlers, which use heading hierarchy to understand page topic and section weight.

Structure headings as a strict outline: one <h1> per page, with nested levels increasing by at most one at a time:

<h1>Page Title</h1>
  <h2>Primary Section</h2>
    <h3>Subsection</h3>
    <h3>Another Subsection</h3>
  <h2>Second Section</h2>
    <h3>Details</h3>

Never skip a level — jumping from <h2> to <h4> is invalid. To style text at a smaller size without demoting its heading level, use CSS: apply text-sm or font-size via className, not a lower heading element. In Next.js, ensure your root page.tsx contains exactly one <h1> and that layout components (Header, Sidebar) do not inject additional <h1> tags.