# Semantic HTML

Category: [Technical SEO](https://seo-geo-glossary.com/en/glossary/category/technical-seo/) › [HTML, mobile & accessibility](https://seo-geo-glossary.com/en/glossary/category/technical-seo/html-mobile-accessibility/) · Also known as: HTML semantics

**Semantic HTML** means choosing HTML elements by what they mean instead of how they look. Navigation goes in `<nav>`, the main content in `<main>`, a self-contained piece in `<article>`. CSS handles appearance.

## 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:

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

With semantics:

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

## Common mistakes

- Headings chosen for font size.
- Clickable `<div>` elements where `<button>` or `<a>` fits.

## Related terms

- [HTML](https://seo-geo-glossary.com/en/glossary/html/index.md)
- [HTML head](https://seo-geo-glossary.com/en/glossary/html-head/index.md)
- [HTML validation](https://seo-geo-glossary.com/en/glossary/html-validation/index.md)
- [Headings (H1–H6)](https://seo-geo-glossary.com/en/glossary/headings/index.md)
- [Web accessibility](https://seo-geo-glossary.com/en/glossary/web-accessibility/index.md)
- [Heading hierarchy](https://seo-geo-glossary.com/en/glossary/heading-hierarchy/index.md)

## More on the searchVIU blog

- [Optimizing for AI Agents — Common Pitfalls and How to Fix Them](https://www.searchviu.com/en/optimize-for-ai-browsers/)

## Sources

- [Semantic HTML – web.dev Learn HTML](https://web.dev/learn/html/semantic-html)
- [Semantics – MDN Glossary](https://developer.mozilla.org/en-US/docs/Glossary/Semantics)
- [SEO Starter Guide – Google Search Central](https://developers.google.com/search/docs/fundamentals/seo-starter-guide)

---

Last updated: October 7, 2026
URL: https://seo-geo-glossary.com/en/glossary/semantic-html/