Секции в футере
- 10 мая 2017
Можно ли вкладывать элементsection
в footer
? ** — спрашивает наш зритель Роман. Рома, можно. Если вы понимаете, что вы делаете. Давайте разберёмся.
Элемент section
появился в HTML5 и разделяет содержимое на части или секции. Отсюда и название.
Как понять, что это вообще section
? Это даже важнее, чем можно ли его куда-либо вкладывать. Section
— это одна из частей содержимого, а значит он не имеет смысла в одиночку. Это как список из одного пункта, который скорее параграф.
<main>
<section>
<h2>Зачем?</h2>
</section>
</main>
Если содержимое делится на несколько логических частей, значит каждую можно завернуть в отдельный section
. Такой секции стоит дать заголовок, чтобы было понятней, что там содержится. Спецификация даже настаивает на этом.
<h1>Обед</h1>
<section>
<h2>Первое</h2>
</section>
<section>
<h2>Второе</h2>
</section>
Многие думают, что section
— это такой модный div
и очень ошибаются. Смотрите, я использую HTML5! Нет. Этот элемент несёт определённый смысл и если вы его не понимаете, его лучше вообще не трогать.
Самый яркий пример использования section
прямо из спецификации — это блок со вкладками. У вас есть группа вкладок и нажатие на заголовок каждой показывает её содержимое. Такая вкладка — это самый настоящий section
.
Или типичный одностраничный лендинг: всё содержимое сайта на одной странице, но в отдельных частях высотой с окно. Описание компании, преимущества, адрес с картой — ну, вот это всё. Каждый такой блок — это section.
Ладно, с секциями разобрались, а что такое footer
? Если очень коротко, то это такой справочный блок с датой публикации, автором, сносками. И он может быть не один на странице! О нём мы как-нибудь поговорим отдельно.
Итак, footer
справочный, section
делит на части. То есть: если в справке есть какие-то структурные части, то почему бы и нет? Бывает, что в подвал сайта кладут много информации, которая помогает сориентироваться: контакты, карту сайта, поиск. Хороший такой, жирненький footer
.
<footer>
<section>
<h2>Поиск</h2>
</section>
<section>
<h2>Справка</h2>
</section>
</footer>
Даёте каждой секции подходящий заголовок и делите footer
на части.
Про семантику section
и других элементов можно почитать на сайте HTML5 Doctor. Некоторые статьи писали авторы спецификации HTML, чтобы помочь разработчикам. Их также много переводили, так что все ссылки есть в описании к видео.
Мораль: используйте новые структурные HTML-элементы только если вы понимаете, как они работают. И не забывайте вставлять заголовки для секций. А если их нет на макетах, доступно их прячьте.
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Читать дальше





search: новый HTML-элемент в 2023
Перевод статьи Альваро Монторо о новом теге
- 12 мая 2023

Как сверстать доступный сайт
Что важно учесть, чтобы сайтом смогли пользоваться все.
- 11 мая 2023


В каких браузерах тестировать вёрстку в 2023
Понятная инструкция для тех, кто запутался в хромиумах.
- 11 апреля 2023

