<section> Универсальный секционный элемент HTML

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

Попробуйте

<h1>Choosing an Apple</h1>
<section>
  <h2>Introduction</h2>
  <p>
    This document provides a guide to help with the important task of choosing
    the correct Apple.
  </p>
</section>

<section>
  <h2>Criteria</h2>
  <p>
    There are many different criteria to be considered when choosing an Apple —
    size, color, firmness, sweetness, tartness...
  </p>
</section>

h1,
h2 {
  margin: 0;
}

Атрибуты

Этот элемент включает только глобальные атрибуты.

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

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

Также рассмотрите следующие случаи:

• Если содержимое элемента представляет собой самостоятельную, неделимую единицу контента, которая имеет смысл в качестве отдельной публикации (например, запись в блоге, комментарий к записи в блоге или газетная статья), лучше использовать элемент <article>.
• Если содержимое представляет собой полезную дополнительную информацию, которая дополняет основной контент, но не является его непосредственной частью (например, связанные ссылки или биография автора), используйте <aside>.
• Если содержимое представляет собой основную область документа, используйте <main>.
• Если элемент используется только как обёртка для стилизации, вместо него используйте <div>.

Повторим: каждый <section> следует обозначать, по возможности добавляя заголовок (элемент h1 — h6) в качестве дочернего элемента <section>. Ниже приведены примеры ситуаций, когда <section> может не иметь заголовка.

Примеры

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

До

<div>
  <h2>Heading</h2>
  <p>Bunch of awesome content</p>
</div>

Результат

После

<section>
  <h2>Heading</h2>
  <p>Bunch of awesome content</p>
</section>

Результат

Использование раздела без заголовка

Ситуации, в которых <section> используется без заголовка, обычно встречаются в разделах веб-приложений и пользовательских интерфейсов, а не в традиционной структуре документа. В документе отдельный раздел содержимого без заголовка, описывающего его содержание, практически не имеет смысла. Такие заголовки полезны всем читателям, особенно пользователям вспомогательных технологий, например программ экранного доступа, а также помогают в SEO.

Однако можно рассмотреть механизм вторичной навигации. Если глобальная навигация уже помещена в элемент <nav>, можно, например, поместить меню перехода к предыдущей и следующей страницам в <section>:

<section>
  <a href="#">Previous article</a>
  <a href="#">Next article</a>
</section>

А как насчёт панели кнопок для управления приложением? Для неё может не требоваться заголовок, но она всё равно представляет собой отдельный раздел документа:

<section>
  <button class="reply">Reply</button>
  <button class="reply-all">Reply to all</button>
  <button class="fwd">Forward</button>
  <button class="del">Delete</button>
</section>

Результат

В зависимости от содержимого заголовок также может быть полезен для SEO, поэтому этот вариант стоит рассмотреть.

Техническая сводка

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

Совместимость с браузерами

См. также

• Другие элементы, связанные с разделами: <body>, <nav>, <article>, <aside>, h1, h2, h3, h4, h5, h6, <hgroup>, <header>, <footer>, <address>
• Использование разделов и структуры HTML
• ARIA: роль region
• Почему стоит выбрать article вместо section в HTML5, автор Bruce Lawson