Как правильно добавить секцию на страницу. Тег <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>
, в зависимости от логической связи контента.
Актуальность
Тег <section>
не является устаревшим.
Хотите узнать больше об HTML-тегах?
Прочитайте справочник по HTML или познакомьтесь с вёрсткой на интерактивных тренажёрах в HTML Academy.
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.