Книга из которой выглядывают закладки: tools, docs
Иллюстрация: Кира Кустова

<section>

Логические блоки сайта принято оборачивать в этот тег.

Время чтения: меньше 5 мин

Кратко

Скопировано

Тег <section> создаёт независимый блок — например, блок новостей, блок с контактами или просто абзац с заголовком.

Пример

Скопировано
        
          
          <section>  <h1>Заголовок первого блока</h1>  <p>Съешь ещё этих мягких французских булок, да выпей чаю.</p></section><section>  <h1>Заголовок второго блока</h1>  <p>Съешь ещё этих мягких французских булок, да выпей же чаю.</p></section>
          <section>
  <h1>Заголовок первого блока</h1>
  <p>Съешь ещё этих мягких французских булок, да выпей чаю.</p>
</section>

<section>
  <h1>Заголовок второго блока</h1>
  <p>Съешь ещё этих мягких французских булок, да выпей же чаю.</p>
</section>

        
        
          
        
      

Как понять

Скопировано

В <section> помещаются важные для поисковика элементы, для которых не нашлось подходящего тега вроде <img> или <header>.

Как пишется

Скопировано

Тег <section> всегда закрывается при помощи парного тега </section>.

Внутри <section> обязательно должен быть заголовок <h1>...<h6>.

Контейнеры <section> можно вкладывать друг в друга, как матрёшку.

Атрибуты

Скопировано

Можно применить все глобальные атрибуты.

Подсказки

Скопировано

💡 Если вы хотите просто объединить и стилизовать второстепенные элементы, которые не так важны для поисковика, лучше использовать <div>.

На практике

Скопировано

Дока Дог советует

Скопировано

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

🛠 Внутри <section> должен быть обязательно заголовок <h1>, <h2> и так далее. Читайте подробнее про заголовки.

Алёна Батицкая советует

Скопировано

🛠 Некоторые начинающие разработчики неверно понимают семантику этого тега и заменяют им большую часть дивов на странице. Так делать не стоит.

Тегом <section> стоит оборачивать большие логические блоки на странице.

🛠 По спецификации допустимо размещать в каждом <section> заголовок первого уровня (<h1>). Несмотря на это, не стоит размещать на странице больше одного заголовка первого уровня. Это важно для правильной индексации сайта поисковыми роботами.