Семантичні елементи макета

Ти вже чудово попрацював, навчившись використовувати базові текстові теги, як-от <p> і <h1>, для відображення контенту. Тепер час зробити наступний великий крок: організувати ці блоки тексту у гарну, структуровану вебсторінку.

Давай зануримось у світ семантичних елементів макета!

Що означає "семантичний"?

У веброзробці слово "семантичний" означає "пов'язаний зі змістом". Семантичний HTML-тег — це контейнер, який чітко підказує браузеру, який саме тип контенту знаходиться всередині.

Щоб краще зрозуміти це, порівняй семантичні теги з універсальним тегом <div>.

• Уяви <div> як звичайну картонну коробку без жодного підпису. Ти можеш покласти туди що завгодно, але ніхто не знає, що всередині, поки не відкриє коробку.
• Семантичні теги — це як коробки з великими, чіткими етикетками на кшталт "КНИГИ" або "КУХОННЕ ПРИЛАДДЯ". Завдяки підпису і ти, і комп'ютер одразу розумієте призначення коробки.

Анатомія вебсторінки

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

Ось основні теги макета, з яких складається сторінка:

• <header> і <nav>: <header> — це велика вступна зона у верхній частині сторінки, як великий заголовок газети. Усередині або поруч із ним зазвичай є <nav> (навігація), який працює як зміст із посиланнями для переходу сайтом.
• <main>: Це головна "титульна" частина сторінки. Він містить найважливіший і унікальний контент саме цієї сторінки. Золоте правило: на сторінці має бути тільки один <main>.
• <article> vs <section>: Ці теги схожі, але мають важливу відмінність:
  • <article> — це повністю самостійний блок контенту. Якщо "вирізати" його зі сторінки й показати окремо, він має залишитися зрозумілим сам по собі. Наприклад, окремий блог-пост або новина.
  • <section> — це спосіб згрупувати пов'язані частини на великій сторінці. Наприклад, секція "Контакти" або тематичний блок.
• <aside>: Використовується для другорядного контенту, який доповнює основний, але не є головним фокусом. Це як бокова колонка в газеті з порадами, короткою біографією автора або пов'язаними посиланнями. На сайтах <aside> добре підходить для змісту, блоку "читати далі" або короткої примітки.
• <footer>: Це завершальна інформація внизу документа. У газетній аналогії це дрібний шрифт унизу сторінки з даними про авторські права та контакти.

Чому краще використовувати їх замість <div>?

Можливо, ти думаєш: "Чому не зробити весь макет звичайними <div>?". Технічно це можливо, але семантичні елементи дають дві великі переваги:

1. Доступність: Багато людей із порушеннями зору користуються скрінрідерами. Семантичні елементи працюють як чіткі невидимі орієнтири. Вони дозволяють швидко пропустити навігацію і перейти до основного контенту. Якщо використовувати лише <div>, скрінрідер не розуміє, де важлива частина сторінки.
2. SEO (Search Engine Optimization): Пошукові системи (наприклад, Google) використовують автоматичні програми для сканування сайту. Семантичні теги допомагають цим системам краще розуміти структуру сторінки та визначати найважливіший контент, що може покращити видимість у пошуку.

Візуальний приклад коду

Ось короткий і простий приклад правильно структурованої сторінки в HTML:

<header>
  <h1>Моя чудова пекарня</h1>
  <nav>
    <ul>
      <li><a href="/home">Головна</a></li>
      <li><a href="/menu">Меню</a></li>
    </ul>
  </nav>
</header>

<main>
  <section>
    <h2>Ласкаво просимо до пекарні!</h2>
    <p>Ми випікаємо найсвіжіший хліб у місті.</p>
  </section>

  <article>
    <h2>Рецепт дня: закваска</h2>
    <p>Ось як приготувати наш фірмовий хліб на заквасці вдома...</p>
  </article>

  <aside>
    <h2>Порада пекаря</h2>
    <p>Використовуй кухонні ваги для точніших рецептів хліба.</p>
  </aside>
</main>

<footer>
  <p>&copy; 2026 Моя чудова пекарня. Усі права захищено.</p>
</footer>

Підсумок

Ти чудово справляєшся! Коротко повторимо головне:

• Семантичні теги — це контейнери зі змістом, на відміну від <div>, який сам по собі змісту не додає.
• <header> і <nav> представляють сторінку та допомагають із навігацією.
• <main> містить головний контент, і на сторінці має бути лише один такий тег.
• <article> є самостійним блоком, а <section> групує пов'язані частини сторінки.
• Використовуй <aside> для додаткового контенту: бокових приміток, порад або пов'язаних посилань.
• Використання семантичних тегів критично важливе і для доступності (скрінрідери), і для SEO (пошукові системи).