skip to main content

<section>

html

Кратко 🔗

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

Пример 🔗

HTML

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

Владимир 👨‍🔧

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

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


Автор: Владимир 👨‍🔧