Pull to refresh
0
HTML Academy
Обучаем веб-разработке и меняем жизни

Секции в футере

Reading time 2 min
Views 9.1K


Можно ли вкладывать элемент <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-элементы только если вы понимаете, как они работают. И не забывайте вставлять заголовки для секций. А если их нет на макетах, доступно их прячьте.


Видеоверсия



Вопросы можно задавать здесь.

Tags:
Hubs:
-3
Comments 17
Comments Comments 17

Articles

Information

Website
htmlacademy.ru
Registered
Founded
Employees
101–200 employees
Location
Россия
Representative
Евгений Шкляр