Структурні блоки сайту в HTML

Вивчаємо стандартну структуру вебсайту: wrapper, header, container, content, sidebar та footer.

Структурні блоки сайту в HTML

При створенні сайтів зазвичай використовують стандартні назви для основних структурних блоків. Це допомагає зрозуміти призначення кожної частини сторінки.

wrapper — загальний контейнер, у якому знаходиться весь сайт.
header — верхня частина сайту, зазвичай містить логотип та основне меню.
content — основна частина сторінки з текстом або контентом.
sidebar — бокова панель з додатковою інформацією.
footer — нижня частина сайту.

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

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

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

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

Блок container для об'єднання контенту і sidebar

Часто основний контент і бічну панель об'єднують у спільний блок container. Це зручно для створення макета сторінки.

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

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

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

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

Сайт з двома sidebar

У складніших макетах можна використовувати два сайдбари: лівий і правий. Контент при цьому розташовується між ними.

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

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

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

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

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

❗ Важливо:

Таку структуру часто використовують як основу для сайтів перед додаванням CSS Grid або Flexbox.

wrapper відповідає за весь сайт.
header створює верхню частину сторінки.
container об'єднує основну область і додаткові блоки.
content містить головну інформацію.
sidebar використовується для додаткових елементів.
footer завершує сторінку.

📌 Завдання:

№1. Створіть блок wrapper.
№2. Додайте всередину header, content, sidebar та footer.
№3. Об'єднайте content і sidebar у блок container.
№4. Створіть варіант сторінки з двома sidebar.

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

Перед створенням CSS-макета спочатку правильно побудуйте HTML-структуру сторінки.

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

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

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

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

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