Тег <section> определяет раздел документа, который содержит связанный контент. Иными словами, тег используется для группировки содержимого, которое связано тематически или по смыслу.

Синтаксис тега <section>

<section>
  <h2>Заголовок секции</h2>
  <p>Содержимое секции</p>
</section>

Спецификация HTML

Тег является частью спецификации HTML Living Standard.

Семантический или нет

Тег <section> считается семантическим, поскольку несёт в себе смысл и точно передаёт назначение своего содержимого. Он обозначает логически связанный блок контента, который может быть использован для описания отдельной секции страницы.

Примеры использования

Создание секции с заголовком и текстом:

<section>
  <h2>О нас</h2>
  <p>Мы компания, занимающаяся разработкой программного обеспечения.</p>
</section>

Группировка списка статей:

<section>
  <h2>Статьи</h2>
  <article>
    <h3>Заголовок статьи 1</h3>
    <p>Содержимое статьи 1</p>
  </article>
  <article>
    <h3>Заголовок статьи 2</h3>
    <p>Содержимое статьи 2</p>
  </article>
</section>

Разделение страницы на несколько блоков:

<section>
  <h2>Блок 1</h2>
  <p>Содержимое блока 1</p>
</section>
<section>
  <h2>Блок 2</h2>
  <p>Содержимое блока 2</p>
</section>
<section>
  <h2>Блок 3</h2>
  <p>Содержимое блока 3</p>
</section>

Секция с заголовком и формой:

<section>
  <h2>Регистрация</h2>
  <form>
    <label for="username">Имя пользователя:</label>
    <input type="text" id="username">>
    <label for="password">Пароль:</label>
    <input type="password" id="password">>
    <button type="submit">Зарегистрироваться</button>
  </form>
</section>

Для чего использовать тег <section>

  • Разделить страницу на логически связанные блоки.
  • Сгруппировать связанный контент.
  • Создать навигационное меню.
  • Разделить страницу на главы или разделы.
  • Разделить страницу на колонки или блоки.
  • Сгруппировать видео или аудио.

Атрибуты тега <section>

У тега нет специфических атрибутов.

Глобальные атрибуты

Тег поддерживает все глобальные атрибуты HTML.

Ограничения

Тег <section> не имеет ограничений. Однако вложенность секций друга должна быть логически обоснована и иметь смысл.

Нюансы

  • Тег <section> должен использоваться только для группировки элементов, которые относятся к одной логической секции на странице. Если на странице есть несколько разных секций, то каждая из них должна быть обёрнута в свой <section>.
  • Тег <section> не предполагает никаких специальных стилей по умолчанию и не влияет на стили других элементов на странице. Это означает, что разработчик должен самостоятельно задавать стили для каждой секции на странице.
  • Тег может содержать заголовок, который помогает читателю понять, что содержится внутри этой секции. Для этого рекомендуется использовать заголовки семантических элементов, таких как <h1><h6>, в зависимости от важности заголовка.
  • Тег может использоваться вместе с другими семантическими элементами, такими как <article>, <nav>, <aside> и другими, для создания более чёткой структуры страницы.
  • Тег может содержать внутри себя другие элементы, включая теги <section>. Однако не рекомендуется делать слишком глубокую вложенность, чтобы не усложнять чтение и понимание структуры страницы.

Поддержка браузерами

Тег поддерживается всеми современными браузерами. Актуальная информация — на сaniuse.

Альтернативные теги

Тег <div> может использоваться как альтернатива тегу <section>, если требуется просто группировать контент.

Чем заменить тег

Если требуется группировать контент по темам, можно использовать тег <div> или другой семантический тег, например, <article> или <aside>, в зависимости от логической связи контента.

Актуальность

Тег <section> не является устаревшим.


Хотите узнать больше об HTML-тегах?

Прочитайте справочник по HTML или познакомьтесь с вёрсткой на интерактивных тренажёрах в HTML Academy.


«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

ТелеграмПодкастБесплатные учебники

Читать дальше

<div>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

<dl>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

<option>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

<ul>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

<video>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

<datalist>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

<caption>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

<ins>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023