Semantic HTML

How does semantic HTML work?

web.dev describes it as structuring content based on each element’s meaning, not its appearance. Browsers build an accessibility tree from the markup, and semantic elements carry implicit roles that screen readers can use. A <div> has no meaning, so roles and keyboard behavior must be added by hand, for example through ARIA attributes. A native <button> brings keyboard support and focus handling with it.

Common elements:

• <header>, <nav>, <main>, <footer> for page layout
• <article>, <section>, <aside> for content blocks
• <h1> to <h6> for headings
• <figure>, <time>, <details> for specific content types

Semantic HTML and SEO

The main benefits are accessibility and maintainable code. For Google Search the role is limited. Google’s SEO Starter Guide says that from the perspective of Google Search it does not matter if headings are used out of order, although a semantic order is good for screen readers. It also notes that the web in general is not valid HTML, so Google can rarely depend on semantic meanings in the HTML specification. A ranking advantage from semantic elements alone is not documented by Google. The MDN glossary, in contrast, lists influence on search rankings as a benefit of semantic elements.

Example

Without semantics:

<div class="top"><div class="menu">…</div></div>
<div class="content"><div class="title">Title</div>…</div>

With semantics:

<header><nav>…</nav></header>
<main>
  <article>
    <h1>Title</h1>
    …
  </article>
</main>

Last updated: October 7, 2026