HTML semantic elements

HTML's semantic vocabulary — header, nav, main, article, section, aside, figure, footer — encodes structure that browsers, search engines, and assistive technology rely on.

Normative spec: https://html.spec.whatwg.org/multipage/sections.html
Last verified: 2026-04-27
Byline: Editorial team

What “semantic” means in HTML

A semantic element is one whose tag carries meaning beyond visual layout. <button> means button; <nav> means navigation. Browsers expose this meaning to the platform accessibility tree, search engines weigh it for ranking and rich snippets, and reading-mode features in all major engines use it to decide what is content and what is chrome.

Non-semantic alternatives — <div> and <span> — communicate nothing to any of those audiences. They have a place (as styling hooks), but they are not interchangeable with semantic elements.

The sectioning vocabulary

Element	Purpose
`<header>`	Introductory content for the nearest sectioning ancestor (or page).
`<nav>`	A region of major in-page or in-site navigation.
`<main>`	The dominant content of the page; one per page.
`<article>`	A self-contained, independently distributable composition (post, comment, listing).
`<section>`	A thematic grouping of content, typically with a heading.
`<aside>`	Tangential content — sidebar, footnote, pull quote.
`<footer>`	Footer for the nearest sectioning ancestor (or page).
`<address>`	Contact information for the nearest article or page.
`<search>`	A search interface (HTML 2023).

Sectioning elements (article, section, nav, aside) create new sectioning contexts. Headings (h1–h6) inside a section nest under that section’s outline. The HTML specification’s outline algorithm is not implemented in any user agent, so authors must continue to use a deliberate h1–h6 hierarchy rather than relying on sectioning to auto-renumber headings.

Content model summary

<main>, <header> and <footer> may appear multiple times in sectioning roots, but only the outermost ones map to the main, banner, and contentinfo landmarks. Nesting an <article> inside <article> is valid (e.g., a comment thread).

<section> is appropriate when the content is part of a larger work and would carry a heading in a printed table of contents. If the content has no heading and is independently distributable, <article> fits better.

The `<figure>` and `<figcaption>` pair

<figure> groups a self-contained chunk — image, code listing, table, or quotation — with an optional <figcaption>. The pair has a predictable effect on screen-reader output: the caption is read after the figure content. Always provide an accessible name for <figure> either via <figcaption> or aria-labelledby.

<figure>
  <img src="grid.svg" alt="2x3 CSS grid layout, with the third row spanning all columns" />
  <figcaption>Figure 3. A 2x3 CSS grid with a footer that spans every column.</figcaption>
</figure>

When semantic elements help vs do not help

Help:

Reading mode in all major engines uses sectioning elements to determine the article body.
Screen-reader landmark navigation surfaces them.
dir="rtl", language switching, and find-in-page integrate with sectioning.

Do not help:

Search ranking is influenced by content quality more than by tag choice; semantic elements help comprehension by crawlers, not ranking directly.
Page weight: tag choice is irrelevant to bytes once gzipped.

Browser engine support

The sectioning elements have been stable across Chromium (Blink), WebKit, and Gecko since 2014. The HTML 2023 <search> element shipped in all three by mid-2024 and is the preferred replacement for <form role="search">. Older versions may need the explicit ARIA fallback.

Common pitfalls

<div class="header"> instead of <header>. Costs nothing in styling, loses landmarks and reading mode.
Multiple <main> elements. Only one is permitted.
Wrapping every block in <section>. A <section> without a heading exposes a region landmark only if it also has aria-label. Use sparingly.
<address> for postal addresses. The element is for contact information for the article author or page — not arbitrary postal addresses.