Heading Hierarchy

The <h1> element defines the single, overarching topic of the document. It serves as the top-level entry point for the accessibility tree and AI content models.

• Rule: Use exactly one <h1> per page to avoid confusing parsers about the primary subject.
• Anti-pattern: Multiple <h1> tags create a flat, competing set of signals, degrading semantic extraction accuracy.
• Origin: Defined in the HTML Living Standard as the highest rank in the heading content categories.

Heading ranks must descend sequentially without skipping levels to maintain a logical document outline. A jump from <h2> to <h4> creates a semantic gap, implying a missing parent section.

• Rule: An <h3> must be a sub-topic of the preceding <h2>; an <h4> must follow an <h3>.
• Why it matters: AI agents use this numeric progression to calculate information gain scoring and the relative importance of content blocks.
• Validation: Automated checkers flag skipped levels as structural errors that break programmatic determinism.

Heading hierarchy must align with sectioning content elements (<article>, <section>, <nav>, <aside>) to create an explicit, machine-readable outline.

• Mechanism: When a heading is placed inside a sectioning element, its effective rank is calculated relative to the nesting depth of the section, though explicit ranks are always preferred for clarity.
• Best Practice: Always use explicit <h1>-<h6> ranks rather than relying on the browser's implicit outline algorithm, which is not consistently implemented by AI crawlers.
• Benefit: This alignment reinforces semantic interoperability between the DOM structure and the accessibility tree.

The anti-pattern of divitis—using only semantically neutral <div> and <span> elements—destroys heading hierarchy by removing all programmatic meaning.

• Impact: A page built entirely with <div> elements and styled to look like headings provides zero structural signals to AI parsers.
• Solution: Replace visual-only headings with actual <h1>-<h6> elements to expose the document's skeleton to the accessibility tree.
• Contrast: Native semantics provide implicit roles that require no additional ARIA attributes, forming the foundation of reliable semantic extraction.

Heading text must be concise, descriptive, and front-loaded with key terms to optimize for LLM context window attention mechanisms.

• Principle: AI models and screen readers scan headings to build a mental model; vague labels like "Introduction" or "More Info" fail to convey semantic value.
• Technique: Place the most specific entity or concept at the beginning of the heading to maximize entity salience in vector embeddings.
• Example: Use "Heading Hierarchy Validation Rules" instead of "Rules for Validating the Hierarchy of Headings."

The visual styling of a heading (size, weight, color) must be controlled via CSS, never by choosing an incorrect heading rank for its default appearance.

• Anti-pattern: Using an <h3> because its default font size looks right, when the content is actually a primary section that should be an <h2>.
• Rule: Select the heading level based solely on its logical position in the document outline, then apply logical properties and CSS to achieve the desired visual design.
• Result: This ensures that the formatting context and visual presentation remain independent of the underlying semantic structure, preserving meaning for AI parsers.