<section>

Тег <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>). Несмотря на это, не стоит размещать на странице больше одного заголовка первого уровня. Это важно для правильной индексации сайта поисковыми роботами.

+ Развернуть