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

З поверненням.

У попередньому уроці ти навчився створювати форми і збирати дані від користувачів.

Тепер ми вивчаємо семантичний HTML.

Тут HTML стає чимось більшим, ніж просто набір тегів.

Він стає значенням.

Бо так, можна побудувати все за допомогою div.

Але можна також їсти суп викруткою.

Можливо?

Може бути.

Хороша ідея?

Абсолютно ні.

Що Ти Вивчиш

У цьому уроці ти дізнаєшся:

що означає semantic HTML;
чому семантичні елементи важливі;
як використовувати header;
як використовувати nav;
як використовувати main;
як використовувати section;
як використовувати article;
як використовувати aside;
як використовувати footer;
як уникати “div soup”;
як будувати зрозумілу структуру сторінки.

Що Таке Семантичний HTML?

Семантичний HTML означає використання елементів, які описують значення контенту.

Наприклад:

<header>
  <h1>Мій Сайт</h1>
</header>

Це каже браузеру:

Це header-область сторінки.

Порівняй з цим:

<div>
  <h1>Мій Сайт</h1>
</div>

div працює.

Але він нічого не пояснює.

Це просто універсальна коробка.

Таємнича коробка.

Коробка без паспорта.

Чому Семантичний HTML Важливий

Семантичний HTML допомагає:

браузерам краще розуміти сторінку;
screen readers пояснювати сторінку;
пошуковим системам розуміти контент;
розробникам читати код;
майбутньому тобі не плакати в каву.

Хороший HTML — це не тільки те, що видно на екрані.

Це також структура.

Сторінка має не тільки виглядати правильно.

Вона має мати сенс.

Елемент header

Елемент header представляє вступний контент.

Зазвичай він містить:

назву сайту;
логотип;
головний заголовок;
навігацію;
короткий вступ.

Приклад:

<header>
  <h1>InnoMarts Learning Hub</h1>
  <p>Веселі курси для серйозних навичок.</p>
</header>

Сторінка може мати головний header.

Секції й статті також можуть мати власні headers.

HTML гнучкий.

Але не випадковий.

Гнучкий як йога.

Не випадковий як помилка принтера.

Елемент nav

Елемент nav представляє навігаційні посилання.

Приклад:

<nav>
  <a href="index.html">Головна</a>
  <a href="courses.html">Курси</a>
  <a href="contact.html">Контакт</a>
</nav>

Використовуй nav для важливих зон навігації.

Наприклад:

головне меню;
меню курсу;
зміст сторінки;
навігація у footer.

Не загортай кожне окреме посилання в nav.

Посилання всередині абзацу не потребує nav.

Semantic HTML означає уважно вибирати значення.

Не треба одягати корону на кожну картоплину.

Елемент main

Елемент main містить головний контент сторінки.

Приклад:

<main>
  <h1>HTML Курс</h1>
  <p>Цей курс навчає HTML крок за кроком.</p>
</main>

Кожна сторінка зазвичай повинна мати тільки один main.

Контент у main має бути унікальним для цієї сторінки.

Не повторювана навігація.

Не footer.

Не cookie banner, який з’являється як маленький юридичний привид.

Головний контент — це причина, чому сторінка існує.

Елемент section

section групує пов’язаний контент.

Приклад:

<section>
  <h2>Що Ти Вивчиш</h2>
  <p>Ти вивчиш HTML-структуру, текст, посилання, зображення, форми і семантичні елементи.</p>
</section>

Використовуй section, коли контент має чітку тему.

Хороша section зазвичай має заголовок.

Якщо ти не можеш дати їй змістовний заголовок, можливо, тобі не потрібен section.

Можливо, тобі потрібен просто div.

І це нормально.

Не кожна коробка потребує філософської мети.

Елемент article

article представляє незалежний контент.

Приклад:

<article>
  <h2>Чому Варто Вивчати HTML?</h2>
  <p>HTML — це основа вебу.</p>
</article>

Використовуй article для контенту, який може існувати самостійно.

Приклади:

blog posts;
news articles;
уроки курсу;
коментарі;
product cards;
forum posts.

Якщо контент має сенс сам по собі, article може бути хорошим вибором.

Article — це як маленький незалежний громадянин твого сайту.

Сподіваємось, платить податки.

Елемент aside

Елемент aside використовується для пов’язаного бокового контенту.

Приклад:

<aside>
  <h2>Порада</h2>
  <p>Використовуй семантичні елементи, щоб HTML було легше зрозуміти.</p>
</aside>

Використовуй aside для:

порад;
бокових нотаток;
пов’язаних посилань;
біографії автора;
додаткової інформації;
маленьких callouts.

Контент в aside пов’язаний.

Але він не є головним контентом.

Як друг, який коментує збоку.

Корисний.

Іноді занадто чесний.

Елемент footer

Елемент footer представляє нижню або завершальну частину сторінки чи секції.

Приклад:

<footer>
  <p>&copy; 2026 InnoMarts</p>
</footer>

Footer може містити:

copyright;
контактні посилання;
social links;
додаткову навігацію;
legal information.

Footer сторінки зазвичай знаходиться внизу.

Але articles і sections також можуть мати власні footers.

HTML має шари.

Як лазанья.

Але менш смачний.

div Не Є Злом

Елемент div все ще корисний.

div — це універсальний контейнер.

Приклад:

<div class="card">
  <h2>HTML Basics</h2>
  <p>Вивчи основу веб-сторінок.</p>
</div>

Використовуй div, коли немає кращого семантичного елемента.

Не використовуй семантичні елементи тільки для того, щоб звучати професійно.

Використовуй значення там, де є значення.

Використовуй div, коли потрібен нейтральний контейнер.

div не злий.

Але занадто багато div без значення створюють div soup.

А цей суп ніхто не замовляв.

Погана Структура: Div Soup

Це працює, але не має зрозумілого значення:

<div>
  <div>
    <h1>Мій Сайт</h1>
  </div>

  <div>
    <div>Головна</div>
    <div>Курси</div>
    <div>Контакт</div>
  </div>

  <div>
    <h2>Ласкаво просимо</h2>
    <p>Це моя сторінка.</p>
  </div>

  <div>
    <p>Copyright 2026</p>
  </div>
</div>

Браузер може це показати.

Але структура незрозуміла.

Усе — просто div.

Це як підписати кожен інструмент у ящику словом “штука”.

Технічно правда.

Абсолютно марно.

Краща Семантична Структура

Ось краща версія:

<header>
  <h1>Мій Сайт</h1>

  <nav>
    <a href="index.html">Головна</a>
    <a href="courses.html">Курси</a>
    <a href="contact.html">Контакт</a>
  </nav>
</header>

<main>
  <section>
    <h2>Ласкаво просимо</h2>
    <p>Це моя сторінка.</p>
  </section>
</main>

<footer>
  <p>Copyright 2026</p>
</footer>

Це набагато зрозуміліше.

Браузер розуміє це краще.

Розробники розуміють це краще.

Майбутній ти розуміє це краще.

Майбутній ти дякує.

Ймовірно, втомленими очима.

Створи Семантичну Сторінку

Створи файл:

touch semantic.html

Додай це:

<!DOCTYPE html>
<html lang="uk">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Практика Семантичного HTML</title>
</head>
<body>
  <header>
    <h1>Мій Навчальний Сайт</h1>

    <nav>
      <a href="index.html">Головна</a>
      <a href="courses.html">Курси</a>
      <a href="contact.html">Контакт</a>
    </nav>
  </header>

  <main>
    <section>
      <h2>Про Цей Сайт</h2>
      <p>Цей сайт допомагає мені практикувати HTML і створювати кращі сторінки.</p>
    </section>

    <section>
      <h2>Останні Уроки</h2>

      <article>
        <h3>Основи HTML</h3>
        <p>Вивчи базову структуру HTML-документа.</p>
      </article>

      <article>
        <h3>Форми</h3>
        <p>Дізнайся, як користувачі можуть надсилати інформацію через форми.</p>
      </article>
    </section>

    <aside>
      <h2>Порада</h2>
      <p>Використовуй семантичні елементи, коли вони описують призначення контенту.</p>
    </aside>
  </main>

  <footer>
    <p>&copy; 2026 Мій Навчальний Сайт</p>
  </footer>
</body>
</html>

Відкрий її в браузері.

Вона може виглядати просто.

Це нормально.

Семантичний HTML спочатку про структуру.

Краса прийде пізніше з CSS.

Спочатку скелет.

Потім куртка.

Типові Помилки

Використовувати section для всього

Не кожен контейнер потребує section.

Погано:

<section>
  <section>
    <section>
      <p>Привіт</p>
    </section>
  </section>
</section>

Використовуй section, коли контент має чітку тему.

Використовувати article для випадкових блоків

Не кожна card — це article.

Використовуй article, коли контент може існувати самостійно.

Blog post?

Так.

Випадковий layout wrapper?

Ні.

Забути main

Сторінка зазвичай повинна мати один main.

Погано:

<header>...</header>
<section>...</section>
<footer>...</footer>

Краще:

<header>...</header>
<main>
  <section>...</section>
</main>
<footer>...</footer>

Елемент main допомагає визначити центральний контент.

Практика

Створи сторінку:

homepage.html

Вона має містити:

header;
nav;
main;
мінімум два елементи section;
мінімум один article;
один aside;
footer;
заголовки у правильному порядку;
змістовний контент.

Без CSS.

Без JavaScript.

Тільки семантичний HTML.

Міні-Завдання

Створи структуру сторінки курсу.

Вона має містити:

site header;
navigation menu;
головний вступ курсу;
section для списку уроків;
article для preview кожного уроку;
aside з порадою для навчання;
footer з copyright.

Використовуй семантичні елементи уважно.

Без div soup.

Ми поважаємо суп.

Але не в HTML.

Підсумок

Сьогодні ти дізнався, що:

semantic HTML додає значення структурі сторінки;
header представляє вступний контент;
nav представляє навігацію;
main містить головний контент сторінки;
section групує пов’язаний контент;
article представляє незалежний контент;
aside містить пов’язану бокову інформацію;
footer представляє завершальний або нижній контент;
div корисний, коли не підходить жоден семантичний елемент;
семантична структура допомагає доступності, SEO і підтримці коду.

Семантичний HTML робить сторінку легшою для розуміння.

Для браузерів.

Для користувачів.

Для розробників.

І для майбутнього тебе, у якого вже достатньо проблем.

Наступний Урок

У наступному уроці ми побудуємо фінальний HTML-проєкт.

Без паніки.

Просто все, що ти вивчив, разом — як маленький веб-оркестр.