Как правильно добавить секцию на страницу. Тег <section>

25 января 2023

Тег <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>, в зависимости от логической связи контента.