# Semantic Elements — HTML Fundamentals: Structure, Forms and Accessibility

Source: https://www.skillbyai.com/en/html/html-semantic-elements

> Use header, nav, main, article, section and footer instead of generic divs to describe page structure.

## Meaning over div soup

A page built entirely of `<div>` tags works visually but says nothing about structure — semantic tags fix that.

## The common set

`<header>`, `<nav>`, `<main>`, `<article>`, `<section>`, `<footer>` each describe a real role on the page.

```html
<header>
  <nav>...</nav>
</header>
<main>
  <article>
    <section>...</section>
  </article>
</main>
<footer>...</footer>
```

## Labeled boxes

A `<div>` is a plain unmarked box; `<nav>` or `<article>` is the same box with a **label on it** — anyone (or any screen reader) instantly knows what's inside.