Use Semantic HTML and Clear Heading Hierarchy

Also known as: Semantic Markup, HTML5 Semantic Tags, Heading Structure Optimization

Use proper H1–H3 hierarchy, semantic HTML tags, and descriptive headings for accessibility and clarity; Bing notes clear headings help AI systems find information.

What is Use Semantic HTML and Clear Heading Hierarchy?

Impact Mechanism:
RAG & Retrieval
Category:
Technical & Schema
Effort:
Low
Skill needed:
Technical & Dev
Evidence level:
Proven

How does it work?

  1. 1. Give each page one H1

    Use a single <h1> that states the page's topic; several are valid if not nested, but one is the documented best practice.

  2. 2. Nest headings without skipping levels

    Follow <h1> with <h2>, then <h3> for subsections; never jump from h1 to h3, and set text size with CSS, not heading levels.

  3. 3. Make each heading say what follows

    Write headings that state the topic, e.g. 'How long IndexNow takes' instead of 'Details'; WCAG 2.4.6 requires headings to describe topic or purpose.

  4. 4. Wrap page regions in landmark elements

    Use <header>, <nav>, <main>, <aside> and <footer> for page regions, and label each <nav> when a page has more than one.

  5. 5. Use real lists and tables for data

    Mark up steps and items as <ol>/<ul>, and tabular data as <table> with <th> header cells; never use tables for layout.

  6. 6. Check the outline in the validator

    Paste the URL into the W3C Nu Html Checker (validator.w3.org/nu), tick 'outline', and confirm one H1 and no skipped levels.