Headings (h1 - h6): Hierarchy, Accessibility, and Semantic Outlines

Headings provide an architectural blueprint of your document content. They are not merely visual styling tools—they define the outline used by screen readers to navigate content.

1. Heading Levels & Usage

HTML provides 6 levels of headings:

<h1>Main Title of the Document (Exactly one per page)</h1>
<h2>Major Architectural Topic</h2>
<h3>Sub-topic or Component Specification</h3>
<h4>Granular Implementation Detail</h4>
<h5>Minor Subsection or Code Note</h5>
<h6>Footnote or Micro-header</h6>

2. Accessibility Best Practices

1. Only One <h1> Per Document: The <h1> represents the document title. Having multiple <h1> tags confuses assistive technologies.
2. Never Skip Heading Levels: Do not jump from <h2> directly to <h4>. Maintain strict sequential nesting (<h2> → <h3> → <h4>).
3. Use CSS for Sizing: Never choose a heading level based on how large you want the font to appear. Style the heading using CSS font-size.