Пошук уроків, статей та іншого контенту
Показує, як групувати тематично пов’язані частини сторінки за допомогою section і заголовків.
sectionsection — це семантичний HTML-елемент для об’єднання тематично пов’язаного вмісту сторінки.
Наприклад, сторінка курсу може містити окремі розділи:
опис курсу;
програму навчання;
відгуки студентів;
контактну інформацію.
Кожен такий розділ можна описати елементом section.
<section>
<h2>Про курс</h2>
<p>
На курсі ви навчитеся створювати вебсторінки за допомогою HTML і CSS.
</p>
</section>
<section>
<h2>Програма курсу</h2>
<p>
Ви вивчите структуру HTML-документа, семантичні елементи та стилізацію.
</p>
</section>У цьому прикладі кожен section містить окрему тему, а заголовок h2 пояснює її зміст.
section і заголовкиЗазвичай section має власний заголовок. Це допомагає:
користувачам зрозуміти структуру сторінки;
програмам читання з екрана орієнтуватися в документі;
пошуковим системам краще визначати призначення частин сторінки;
розробникам підтримувати зрозумілу структуру HTML.
Заголовок може бути будь-якого рівня: h1, h2, h3 тощо. Рівень залежить від вкладеності розділу в загальну структуру документа.
<h1>Курс веброзробки</h1>
<section>
<h2>HTML</h2>
<section>
<h3>Основи HTML</h3>
<p>Вивчення елементів, атрибутів і структури документа.</p>
</section>
<section>
<h3>Семантична розмітка</h3>
<p>Використання елементів відповідно до їхнього призначення.</p>
</section>
</section>
<section>
<h2>CSS</h2>
<p>Стилізація елементів і створення макетів.</p>
</section>h1 зазвичай є головним заголовком усієї сторінки. Розділи першого рівня під ним найчастіше мають заголовки h2, а вкладені підрозділи — h3.
Розглянемо просту сторінку курсу:
<!doctype html>
<html lang="uk">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Курс веброзробки</title>
</head>
<body>
<header>
<h1>Курс веброзробки</h1>
<p>Перші кроки у створенні вебсторінок.</p>
</header>
<main>
<section>
<h2>Про курс</h2>
<p>
Курс допоможе зрозуміти основи HTML і CSS та створити першу
вебсторінку.
</p>
</section>
<section>
<h2>Чого ви навчитеся</h2>
<ul>
<li>Створювати структуру HTML-документа.</li>
<li>Використовувати семантичні елементи.</li>
<li>Додавати стилі за допомогою CSS.</li>
</ul>
</section>
<section>
<h2>Тривалість навчання</h2>
<p>Навчання розраховане на шість тижнів.</p>
</section>
</main>
<footer>
<p>© 2026 Курс веброзробки</p>
</footer>
</body>
</html>Елемент main містить основний унікальний вміст сторінки, а section ділить цей вміст на тематичні частини.
sectionВикористовуйте section, якщо частина сторінки:
має окрему тему;
є самостійним розділом документа;
має заголовок або логічно потребує заголовка;
пов’язана з іншими частинами сторінки спільною темою.
Наприклад:
<section>
<h2>Новини компанії</h2>
<p>Цього місяця ми запустили новий навчальний курс.</p>
</section>Тут section доречний, бо вміст присвячений конкретній темі — новинам компанії.
section і divsection та div можуть виглядати однаково у браузері, але мають різне призначення.
section описує тематичний розділ документа.
div є нейтральним контейнером без власного семантичного значення.
<section>
<h2>Контакти</h2>
<p>Email: hello@example.com</p>
</section>Цей код повідомляє, що вміст є окремим розділом «Контакти».
<div class="card">
<h2>Контакти</h2>
<p>Email: hello@example.com</p>
</div>div лише групує елементи, наприклад для подальшого стилізування. Він не повідомляє, що саме ця група є тематичним розділом сторінки.
Якщо контейнер має власну тему, використовуйте section. Якщо контейнер потрібен тільки для CSS або технічного групування, підійде div.
sectionСам по собі section не додає рамок, відступів чи фону. Браузер відображає його як звичайний блок.
Стилі можна додати за допомогою CSS:
<!doctype html>
<html lang="uk">
<head>
<meta charset="utf-8">
<title>Тематичні розділи</title>
<style>
section {
margin-bottom: 24px;
padding: 16px;
border: 1px solid #d0d7de;
border-radius: 8px;
}
h2 {
margin-top: 0;
}
</style>
</head>
<body>
<h1>Наші послуги</h1>
<section>
<h2>Розробка сайтів</h2>
<p>Створюємо сучасні вебсайти для бізнесу.</p>
</section>
<section>
<h2>Підтримка</h2>
<p>Допомагаємо оновлювати та покращувати готові проєкти.</p>
</section>
</body>
</html>CSS змінює зовнішній вигляд розділів, але не впливає на їхнє семантичне призначення.
section для кожного контейнераНе потрібно замінювати всі div на section. Якщо елемент не має окремої теми, section може бути недоречним.
<!-- Зайве використання section -->
<section class="wrapper">
<section class="row">
<section class="button-container">
<button type="button">Зберегти</button>
</section>
</section>
</section>У цьому прикладі контейнери потрібні лише для структури або стилів. Для них краще використати div:
<div class="wrapper">
<div class="row">
<div class="button-container">
<button type="button">Зберегти</button>
</div>
</div>
</div>Тематичний розділ має бути зрозумілим. Найпростіший спосіб цього досягти — додати заголовок.
<section>
<p>Текст без пояснення теми розділу.</p>
</section>Краще так:
<section>
<h2>Переваги сервісу</h2>
<p>Текст про переваги сервісу.</p>
</section>section замість заголовкаsection не замінює h1, h2 чи інший заголовок. Ці елементи виконують різні ролі:
section визначає тематичний блок;
заголовок називає цей блок.
<section>
<h2>Відгуки користувачів</h2>
<p>Наші клієнти високо оцінюють сервіс.</p>
</section>section об’єднує тематично пов’язаний вміст.
Розділ зазвичай має власний заголовок.
Рівень заголовка залежить від структури документа.
section має семантичне значення, а div є нейтральним контейнером.
Не слід використовувати section лише для створення обгорток або CSS-контейнерів.
Сам елемент section не додає візуального оформлення — для цього використовується CSS.