Семантичний HTML5

Семантичний HTML5 — розріз будинку з кольоровими зонами кухні спальні вітальні як структура сторінки

У попередніх уроках ми вивчили всі основні HTML-елементи: текст, списки, посилання, зображення, таблиці та форми. Тепер з'єднаємо це все в правильну структуру сторінки за допомогою семантичних тегів.

Що таке семантика?

Семантика — це значення. Семантичний HTML означає, що теги описують зміст, а не зовнішній вигляд.

<!-- ❌ Несемантично — тег нічого не говорить про вміст -->
<div class="header">
  <div class="navigation">...</div>
</div>

<!-- ✅ Семантично — теги описують ЩО це -->
<header>
  <nav>...</nav>
</header>

Обидва варіанти виглядають однаково у браузері. Але семантичний код:

• Зрозумілий для пошукових систем (краще SEO)
• Доступний для скрін-рідерів (допоміжні технології)
• Читабельний для інших розробників

Структура типової веб-сторінки

┌──────────────────────────────────┐
│           <header>               │
│  ┌────────────────────────────┐  │
│  │          <nav>             │  │
│  └────────────────────────────┘  │
└──────────────────────────────────┘
┌──────────────────────────────────┐
│            <main>                │
│  ┌──────────────────┐ ┌───────┐ │
│  │    <article>      │ │<aside>│ │
│  │  ┌────────────┐  │ │       │ │
│  │  │ <section>  │  │ │       │ │
│  │  └────────────┘  │ │       │ │
│  │  ┌────────────┐  │ │       │ │
│  │  │ <section>  │  │ │       │ │
│  │  └────────────┘  │ │       │ │
│  └──────────────────┘ └───────┘ │
└──────────────────────────────────┘
┌──────────────────────────────────┐
│           <footer>               │
└──────────────────────────────────┘

Семантичні теги

<header> — шапка

Вступна частина сторінки або секції. Зазвичай містить логотип, назву та навігацію.

<header>
  <h1>Мій блог</h1>
  <nav>...</nav>
</header>

<nav> — навігація

Блок з основними посиланнями для навігації:

<nav>
  <a href="/">Головна</a>
  <a href="/about">Про мене</a>
  <a href="/contacts">Контакти</a>
</nav>

Використовуй <nav> тільки для основної навігації, не для кожної групи посилань.

<main> — основний контент

Головний вміст сторінки. Тільки один <main> на сторінку!

<main>
  <h1>Останні статті</h1>
  <article>...</article>
  <article>...</article>
</main>

<article> — незалежний контент

Самостійний блок, який має сенс окремо: стаття, пост у блозі, коментар, картка товару.

<article>
  <h2>Як навчитися програмувати</h2>
  <p>Опубліковано: 8 лютого 2026</p>
  <p>Програмування — це навичка, яку може опанувати кожен...</p>
</article>

Тест: якщо цей блок можна вирвати з контексту і він буде зрозумілий — це <article>.

<section> — тематична секція

Група контенту з певною темою, зазвичай з заголовком:

<section>
  <h2>Наші послуги</h2>
  <p>Ми пропонуємо...</p>
</section>

<aside> — бічний контент

Контент, що доповнює основний, але не є обов'язковим: бічна панель, реклама, пов'язані статті.

<aside>
  <h3>Популярні статті</h3>
  <ul>
    <li><a href="/post-1">Вступ до HTML</a></li>
    <li><a href="/post-2">Основи CSS</a></li>
  </ul>
</aside>

<footer> — підвал

Завершальна частина сторінки або секції: копірайт, контакти, посилання.

<footer>
  <p>&copy; 2026 Мій блог. Всі права захищені.</p>
  <a href="mailto:hello@myblog.com">hello@myblog.com</a>
</footer>

Порівняння: div vs семантичні теги

<div> та <span> — це несемантичні теги-контейнери. Використовуй їх тільки коли жоден семантичний тег не підходить (наприклад, для стилізації через CSS).

Додаткові корисні теги

<!-- Контактна інформація -->
<address>
  <a href="mailto:info@example.com">info@example.com</a><br>
  Київ, Україна
</address>

<!-- Час та дата (зрозумілий для машин) -->
<p>Опубліковано <time datetime="2026-02-08">8 лютого 2026</time></p>

<!-- Деталі, які можна розгортати -->
<details>
  <summary>Показати відповідь</summary>
  <p>HTML розшифровується як HyperText Markup Language.</p>
</details>

Веб-доступність (Accessibility)

Доступність (a11y) — це практика створення сайтів, якими можуть користуватися всі, включаючи людей з інвалідністю.

Що ми вже робимо правильно:

• Використовуємо семантичні теги — скрін-рідери розуміють структуру
• Додаємо alt до зображень — незрячі "бачать" картинки
• Пов'язуємо <label> з <input> — форми доступні
• Використовуємо <th scope> в таблицях — дані зрозумілі

Додаткові правила:

• Мова сторінки: <html lang="uk"> — скрін-рідер знає якою мовою читати
• Ієрархія заголовків: h1 → h2 → h3 по порядку, без пропусків
• Контрастний текст: текст повинен бути читабельним на фоні (мін. співвідношення 4.5:1)

Практика: семантична сторінка

<!DOCTYPE html>
<html lang="uk">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Мій блог про технології</title>
</head>
<body>
  <header>
    <h1>Tech Blog</h1>
    <nav>
      <a href="/">Головна</a>
      <a href="/about">Про мене</a>
      <a href="/contacts">Контакти</a>
    </nav>
  </header>

  <main>
    <article>
      <h2>Чому варто вчити HTML у 2026</h2>
      <p>Опубліковано: <time datetime="2026-02-08">8 лютого 2026</time></p>
      <section>
        <h3>HTML — фундамент вебу</h3>
        <p>Кожен сайт починається з HTML...</p>
      </section>
      <section>
        <h3>Семантика має значення</h3>
        <p>Правильна структура покращує SEO та доступність...</p>
      </section>
    </article>

    <aside>
      <h2>Корисні ресурси</h2>
      <ul>
        <li><a href="https://developer.mozilla.org" target="_blank" rel="noopener noreferrer">MDN Web Docs</a></li>
        <li><a href="https://www.w3schools.com" target="_blank" rel="noopener noreferrer">W3Schools</a></li>
      </ul>
    </aside>
  </main>

  <footer>
    <p>&copy; 2026 Tech Blog</p>
    <address>
      <a href="mailto:hello@techblog.com">hello@techblog.com</a>
    </address>
  </footer>
</body>
</html>

Підсумок

• Семантичні теги описують зміст, не зовнішній вигляд
• <header> — шапка, <nav> — навігація, <main> — основний контент
• <article> — незалежний блок, <section> — тематична секція
• <aside> — бічний контент, <footer> — підвал
• <div>/<span> — тільки коли немає підходящого семантичного тегу
• Доступність — семантика, alt, label, lang — робить веб доступним для всіх

Що далі?

Блок HTML завершено! Ти знаєш все необхідне для створення структурованих веб-сторінок. Далі — домашнє завдання, а потім починаємо Block 3: CSS — навчимося робити сторінки красивими!