5.html-semantics.md

Quiz

...

Explorer

HTML

5 lessons

html5

HTML Basics HTML Elements Deep Dive HTML Attributes HTML Forms Semantic HTML

~//tutorials/en/html/html-semantics/edit

~ Contribute

Suggest a correction or improvement. The author reviews it before it goes live.

Loading...

en/tutorials/html/5html-semantics

# Semantic HTML

Semantic HTML uses elements that describe *meaning*, not just appearance. It helps accessibility, SEO, and your future self.

## Why semantics matter

Screen readers and search engines use element meaning, not styling. A page built with `<div>`s everywhere tells them nothing.

```html

<div class="header"><div class="title">My Blog</div></div>

<header><h1>My Blog</h1></header>
```

## Landmarks

Landmark elements define the page regions:

- `<header>` — top of the page
- `<nav>` — navigation links
- `<main>` — the primary content (one per page)
- `<article>` — a self-contained piece of content
- `<aside>` — side content
- `<footer>` — bottom of the page

```html
<body>
  <header>Logo and tagline</header>
  <nav>Home · About · Contact</nav>
  <main>
    <article>
      <h1>Post title</h1>
      <p>Post content…</p>
    </article>
  </main>
  <footer>Copyright</footer>
</body>
```

## Lists and text semantics

Use the right element for the job:

- `<ul>` / `<ol>` / `<li>` — lists
- `<strong>` — important text
- `<em>` — emphasis
- `<time>` — a date or time
- `<blockquote>` — a quotation

~ hackweb.dev