Тег section в HTML

Вивчаємо тег section для об'єднання пов'язаних блоків сторінки та створення логічної структури HTML-документа.

Тег section в HTML

Тег section використовується для об'єднання логічно пов'язаних частин сторінки. Зазвичай всередині секції розміщують заголовок та контент, який відноситься до цього розділу.

section — окремий розділ сторінки.
Всередині section зазвичай знаходиться заголовок h2 або h3.
Секції допомагають зробити структуру HTML зрозумілішою.
Тег section покращує семантику документа.

Приклад використання section

Замість звичайних div з класом section можна використовувати спеціальний семантичний тег section.

<section>
  <h2>Заголовок секції</h2>

  <p>
    Перший абзац секції.
  </p>

  <p>
    Другий абзац секції.
  </p>
</section>

<section>
  <h2>Інша секція</h2>

  <p>
    Текст іншого розділу.
  </p>
</section>

Порівняння div і section

Раніше для створення розділів часто використовували div з класом section. У сучасному HTML краще використовувати section, якщо блок має логічний зміст.

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

<div class="section">
  <h2>Заголовок</h2>

  <p>
    Текст.
  </p>

  <p>
    Текст.
  </p>
</div>

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

<section>
  <h2>Заголовок</h2>

  <p>
    Текст.
  </p>

  <p>
    Текст.
  </p>
</section>

❗ Важливо:

Тег section не створює візуальних змін. Він потрібен для правильної структури HTML, SEO та доступності.

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

📌 Завдання:

№1. Є код з div class="section".
№2. Замініть блоки section на однойменний HTML-тег.
№3. Збережіть структуру заголовків і тексту.

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

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

  <div class="section">
    <h2></h2>

    <p></p>
    <p></p>
  </div>

  <div class="section">
    <h2></h2>

    <p></p>
    <p></p>
  </div>
</div>

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

Замініть тільки div з класом section. Основний контейнер content можна залишити div.

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

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

  <section>
    <h2></h2>

    <p></p>
    <p></p>
  </section>

  <section>
    <h2></h2>

    <p></p>
    <p></p>
  </section>
</div>

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

📌 Завдання:

№1. Є великий макет сайту з div.
№2. Замініть відповідні блоки на семантичні теги.
№3. Використайте header, nav, aside, main, section та footer.

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

<div id="wrapper">
  <div id="header">
    <div id="logo">
      <img src="" alt="logo">
    </div>

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

  <div id="container">
    <div id="left">
      <div class="section">
        section
      </div>
    </div>

    <div id="content">
      <h1>main header</h1>

      <div class="section">
        <h2>section header</h2>
      </div>
    </div>

    <div id="right">
      <div class="section">
        section
      </div>
    </div>
  </div>

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

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

Блоки header, footer, left і right можна замінити на відповідні семантичні теги. Внутрішні блоки section замініть тегом section.

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

<div id="wrapper">

  <header>
    <div id="logo">
      <img src="" alt="logo">
    </div>

    <nav>
      <a href="#"></a>
      <a href="#"></a>
      <a href="#"></a>
    </nav>
  </header>

  <div id="container">

    <aside>
      <section>
        section
      </section>

      <section>
        section
      </section>

      <section>
        section
      </section>
    </aside>

    <main>
      <h1>main header</h1>

      <section>
        <h2>section header</h2>

        <div>
          <p></p>
          <p></p>
        </div>

        <div>
          <p></p>
          <p></p>
        </div>
      </section>

      <section>
        <h2>section header</h2>

        <div>
          <p></p>
          <p></p>
        </div>

        <div>
          <p></p>
          <p></p>
        </div>
      </section>
    </main>

    <aside>
      <section>
        section
      </section>

      <section>
        section
      </section>

      <section>
        section
      </section>
    </aside>

  </div>

  <footer>
    footer
  </footer>

</div>

❗ Важливо:

Не всі div потрібно замінювати семантичними тегами. Div залишається потрібним для створення технічних контейнерів та CSS-розмітки.