Основні теги макета в HTML

Вивчаємо семантичні HTML-теги для створення структури сайту: header, footer, aside, main та nav.

Основні теги макета в HTML

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

header — верхня частина сайту або окремого розділу.
footer — нижня частина сайту.
aside — бокова панель або додаткова інформація.
main — головний контент сторінки.
nav — блок навігації з посиланнями.

Структура сайту з семантичними тегами

Замість звичайних div з id можна використовувати спеціальні HTML5-теги, які одразу показують роль кожного блоку.

<div id="wrapper">
  <header>
    header
  </header>

  <div id="container">
    <aside>
      sidebar
    </aside>

    <main>
      content
    </main>
  </div>

  <footer>
    footer
  </footer>
</div>

Тег nav для меню

Для створення навігаційного меню використовується тег nav. Всередині нього зазвичай розміщують посилання.

<nav>
  <a href="#">Головна</a>
  <a href="#">Про нас</a>
  <a href="#">Контакти</a>
</nav>

<!-- Старий варіант -->

<div id="header">
  header
</div>

<div id="sidebar">
  sidebar
</div>

<div id="content">
  content
</div>

<div id="footer">
  footer
</div>

<!-- Семантичний варіант -->

<header>
  header
</header>

<aside>
  sidebar
</aside>

<main>
  content
</main>

<footer>
  footer
</footer>

❗ Важливо:

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

Практичне завдання

📌 Завдання:

№1. Є макет із div та id.
№2. Замініть header, footer, sidebar, content і menu на відповідні HTML5-теги.
№3. Використайте header, footer, aside, main та nav.

<!-- Початковий код -->

<div id="wrapper">
  <div id="header">
    <div id="menu">
      <a href="#"></a>
      <a href="#"></a>
      <a href="#"></a>
    </div>
  </div>

  <div id="container">
    <div id="sidebar">
      sidebar
    </div>

    <div id="content">
      content
    </div>
  </div>

  <div id="footer">
    footer
  </div>
</div>

💡 Показати підказку

Не обов'язково видаляти всі div. Наприклад, wrapper і container можуть залишатися звичайними блоками для створення CSS-макета.

✅ Показати відповідь

<div id="wrapper">
  <header>
    <nav>
      <a href="#"></a>
      <a href="#"></a>
      <a href="#"></a>
    </nav>
  </header>

  <div id="container">
    <aside>
      sidebar
    </aside>

    <main>
      content
    </main>
  </div>

  <footer>
    footer
  </footer>
</div>