# Semantic HTML

> Canonical HTML version: https://rocketvalidator.com/glossary/semantic-html
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

Semantic HTML uses elements that describe meaning and structure, such as `<main>`, `<nav>`, and `<button>`, so browsers and assistive technologies can correctly interpret page content.

Semantic HTML means the markup itself communicates intent. It provides structure before CSS and JavaScript are applied.

## Why semantic HTML matters

Semantic elements improve keyboard navigation, search indexing, and screen reader interpretation. They also reduce the need for ARIA patches later.

## How semantic HTML works

Use elements by purpose:

- `<button>` for actions
- `<a>` for navigation
- `<main>`, `<nav>`, `<aside>`, and `<footer>` for page regions
- heading levels for document outline

Avoid replacing semantic elements with generic `<div>` and `<span>` unless there is a strong reason.

## Code examples

```html
<!-- Div soup -->
<div class="nav"><div class="item">Pricing</div></div>
```

```html
<!-- Semantic equivalent -->
<nav aria-label="Primary">
  <a href="/pricing">Pricing</a>
</nav>
```

```html
<main>
  <h1>Release Notes</h1>
  <article>...</article>
</main>
```