Тег <section>

Тег <section> (укр. – “секція”) є семантичним елементом в HTML, який використовується для логічного розділення контенту на тематичні блоки (наприклад, розділи “Про нас”, “Наші послуги”, “Контакти”). Кожна секція зазвичай має заголовок і містить контент, який стосується однієї теми чи ідеї.

Цей тег допомагає структурувати сторінку таким чином, щоб її було легше сприймати користувачам, а також пошуковим системам і допоміжним пристроям (наприклад, скрінрідерам).

Атрибути

Специфічні атрибути

Тег <section> не має специфічних атрибуті

Глобальні атрибути

Тег <section> підтримує всі глобальні атрибути HTML. Серед них:

  • id — унікальний ідентифікатор для елемента, який можна використовувати для навігації, стилізації або посилань. Наприклад:
<section id="about">
    <!-- Контент секції -->
</section>
  • class — задає клас для стилізації через CSS. Наприклад:
<section class="features">
    <!-- Контент секції -->
</section>
  • style — додає інлайн-стилі до елемента. Наприклад:
<section style="background-color: #f5f5f5;">
    <!-- Контент секції -->
</section>
  • title — додає опис секції, який може бути відображений при наведенні на неї. Наприклад:
<section title="Основний контент">
    <!-- Контент секції -->
</section>

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

<section>
    <h2>Про нас</h2>
    <p>Наша компанія працює на ринку з 2000 року та пропонує якісні послуги для клієнтів.</p>
</section>

<section>
    <h2>Наші послуги</h2>
    <ul>
        <li>Веб-розробка</li>
        <li>Дизайн</li>
        <li>Маркетинг</li>
    </ul>
</section>

Додаткові моменти

  • Тег <section> слід використовувати для групування контенту, який має окрему логічну тему, але не є повністю самодостатнім матеріалом. Наприклад, розділи сторінки типу “Про нас”, “Наші послуги” чи “Контакти”. Якщо блок контенту не має тематики, краще обрати <div>.
  • Якщо контент є завершеним і самодостатнім, наприклад, окрема новина, блог-пост, запис у стрічці соціальної мережі тощо, то краще підійде тег <article>.
  • Кожна секція повинна містити заголовок (<h1>–<h6>), що описує її зміст. Це допомагає як користувачам, так і пошуковим системам. Якщо заголовок не передбачений дизайном, можна скористатися патерном visually-hidden, щоб його візуально приховати, але лишити доступним для пошукових систем та асистивних технологій.
  • Тег <section> покращує доступність, оскільки чітко вказує на логічно завершені блоки контенту. Це спрощує навігацію для користувачів з допоміжними технологіями.
  • Секції можна стилізувати за допомогою CSS, додаючи їм відступи, кольори фону або інші елементи для візуального відокремлення.