Элемент <section>

Элемент <section> определяет универсальный типовой раздел веб-страницы. В большинстве случаях, когда надо добавить раздел, но есть сомнения, какой элемент для этого использовать, подходит именно <section>.

<section> позволяет сгруппировать разное содержимое, связанное друг с другом общим смыслом, и задать ему заголовок. Для заголовков обычно применяется элемент <h2>, <h3> и ниже, а для сложных случаев, когда кроме заголовка есть картинка, форма или что-то ещё, можно воспользоваться элементом <header>.

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

Каждая вкладка представляет собой раздел

Каждая вкладка представляет собой раздел

Общая структура раздела показана в примере 1. Заголовок позволяет идентифицировать раздел и дать ему название.

Пример 1. Содержимое <section>

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

Если в шапке раздела предполагается не один только заголовок, то имеет смысл воспользоваться элементом <header> (пример 2).

Пример 2. Раздел с <header>

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

Здесь кроме элемента <h2> в <header> вставлен абзац <p> с предполагаемым слоганом.

Аналогично мы можем добавить и элемент <footer>, если в нём есть необходимость (пример 3).

Пример 3. Раздел с <footer>

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

Хотя <section> представляет собой универсальный раздел, элементы <article>, <aside> и <nav> в некоторых случаях подходят больше. К примеру, для раздела с навигацией лучше использовать <nav>, как более подходящий по смыслу. В подобных ситуациях от <section> надо отказываться в пользу других элементов.

В примере 4 показано создание нескольких разделов с заголовками и текстом внутри.

Пример 4. Использование <section>

<!DOCTYPE html>
<html>
 <head>
  <title>section</title>
  <meta charset="utf-8">
 </head>
 <body>
  <section>
   <h2>Сервисы</h2>
   <p>Полный арсенал инструментов
    для создания приложения.</p>
  </section>
  <section>
   <h2>Особенности</h2>
   <p>Используйте готовые настройки для автоматизации.</p>
  </section>
  <section>
   <h2>Цены</h2>
   <p>Масса возможностей за смешные деньги.</p>
  </section>
 </body>
</html>

Перейти к заданиям

Автор и редакторы

Автор: Влад Мержевич
Последнее изменение: 02.04.2018
Редакторы: Влад Мержевич