# Semantic Elements — HTML

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

> Meaningful tags instead of generic divs.

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