Semantic HTML

The Citead team, updated

In short. Semantic HTML uses elements according to their defined meanings to describe document structure and content purpose.

Definition: Semantic HTML is the use of HTML elements according to their defined meanings to express the structure and purpose of web content. The WHATWG HTML Standard defines these meanings for software that processes documents, including browsers and search engines.

Key facts

  • The WHATWG HTML Standard's semantics section assigns meanings to elements, attributes and attribute values, and requires authors to use them for their intended purposes.
  • The standard's sections chapter defines article as a self-contained composition and section as a thematic grouping, typically with a heading.
  • The grouping content chapter defines main as the document's dominant content and div as a container with no special meaning.
  • W3C WAI's headings tutorial recommends nesting headings by rank and avoiding skipped ranks where possible.

Which elements describe document structure?

The WHATWG sections chapter defines article as an independently reusable composition, such as a blog entry. A section groups content around a theme, typically with a heading; chapters are one example.

The same chapter defines nav primarily for major navigation blocks and aside for tangential content such as sidebars. A header groups introductory or navigational aids. A footer concerns the nearest enclosing sectioning element, or the document body when there is none, and can contain author information or related links.

What does semantic markup look like?

This illustrative fragment combines WHATWG's article and section structure with the main element around the dominant content:

<main>
  <article>
    <h1>Page structure guide</h1>
    <p>This guide explains document structure.</p>
    <section>
      <h2>Main content</h2>
      <p>The main element represents the document's dominant content.</p>
    </section>
  </article>
</main>

The article is the self-contained guide; section identifies a topic within it. The headings express their relationship. The grouping content chapter permits only one main element without the hidden attribute in a document.

How can a website check its structure?

A review compares each element's meaning with its actual content. The WHATWG semantics rules explicitly treat an element used for the wrong purpose as a conformance problem, even when the markup is syntactically correct.

Heading order also needs review. W3C WAI's headings guidance advises against moving directly from h2 to h4 when opening a subsection. Returning from h4 to h2 can correctly close the previous subsection and start another section. Browsers and assistive technologies can use headings for navigation within a page.

For AI search, as of 17 October 2026, Google's AI features documentation recommends making important content available in text and says that its AI Overviews and AI Mode require no special markup. Semantic structure therefore belongs within ordinary HTML authoring and content accessibility work.

FAQ

Should I replace every div with a section?

Use section when the content forms a thematic part of the document. The WHATWG sections chapter recommends div for a wrapper needed only for styling or scripting.

Can I skip heading levels when returning to another topic?

Yes. W3C WAI's headings tutorial permits a return from h4 to h2 when the previous subsection closes; it advises against skipping ranks when opening subsections.

Do I need special semantic tags for Google's AI features?

Google's AI features guidance says that no new markup is needed for AI Overviews or AI Mode. Keep important content available in textual form.

Sources

  1. WHATWG, "HTML Standard: Semantics, structure, and APIs of HTML documents", 16 October 2026
  2. WHATWG, "HTML Standard: Sections", 16 October 2026
  3. WHATWG, "HTML Standard: Grouping content", 16 October 2026
  4. W3C WAI, "Headings", 4 May 2017
  5. Google Search Central, "AI features and your website", 10 December 2025

Check how a page reads to answer engines. Open the GEO score analyzer

Test a page and see what to fix first

The analysis usually takes less than 10 seconds and needs no account.

400,000+ pages scored in the public benchmark