Футер html: Тег | htmlbook.ru

— HTML — Дока

1. Кратко
2. Пример
3. Как понять
4. Как пишется
5. Атрибуты
6. Подсказки
7. На практике
   1. Дока Дог советует

Авторы:

• Алёна Батицкая

Редакторы:

• Ольга Алексашенко

Редактировать на GitHub

Обновлено 26 октября 2022

Кратко

Скопировано

<footer> создаёт нижнюю часть страницы или блока — «подвал». Обычно здесь находятся контакты, ссылки на разделы сайта, копирайт.

Пример

Скопировано

В нашем блоке со статьёй будет небольшой футер с указанием автора и его контактами:

<article>  <h2>Бигфут</h2>  <p>Бигфут (от англ.  Bigfoot, «большеногий») — название полумифического млекопитающего...</p>  <footer>    <p>Ольга Сасквоч</p>    <p>Почта: <a href="mailto:[email protected]">[email protected]</a>.</p>  </footer></article>
          <article>
  <h2>Бигфут</h2>
  <p>Бигфут (от англ. Bigfoot, «большеногий») — название полумифического млекопитающего...</p>
  <footer>
    <p>Ольга Сасквоч</p>
    <p>Почта: <a href="mailto:[email protected]">[email protected]</a>.</p>
  </footer>
</article>

Открыть демо в новой вкладке

Как понять

Скопировано

Как правило, у сайта есть «шапка» и «подвал»: верхняя и нижняя части страницы. Обычно эти блоки выглядят одинаково на всех страницах. Эти разделы помогают пользователю сориентироваться и получить основную инфу о сайте.

В подвале мы чаще всего видим название компании, правовую информацию, ссылки на соцсети и другие контакты.

<footer> может быть не только у всего сайта целиком, но и у отдельного блока или секции.

Как пишется

Скопировано

Тег <footer> парный, должен всегда закрываться </footer>.

Атрибуты

Скопировано

Применяются все глобальные атрибуты.

Подсказки

Скопировано

💡 У <footer> блочные стили по умолчанию 🤓

💡 Нельзя вкладывать в <address>, <header> или другой <footer>.

💡 Контакты и информацию об авторе стоит поместить в контейнер <address>, а его добавить в <footer>.

На практике

Скопировано

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

Скопировано

🛠 У <footer> особо нет никаких хитростей. Это нижняя часть страницы: там располагаются разные эпилоги. Если это лендинг, там могут лежать иконки соцсетей и информация о компании. Важно выделить <footer>, чтобы поисковик понял, что находится в этом блоке.

Если вы нашли ошибку, отправьте нам пул-реквест!

Во время отправки формы что-то пошло не так. Попробуйте ещё раз?

←

<header>

ctrl + alt + ←

→

<main>

ctrl + alt + →

Секции в футере / Хабр

Можно ли вкладывать элемент <section> в <footer>?

Элемент <section> появился в HTML5 и разделяет содержимое на части или секции. Отсюда и название.

Как понять, что это вообще <section>? Это даже важнее, чем можно ли его куда-либо вкладывать. <section> — это одна из частей содержимого, а значит он не имеет смысла в одиночку. Это как список из одного пункта, который скорее параграф.

<main>
  <section>
    <h3>Зачем?</h3>
  </section>
</main>

Если содержимое делится на несколько логических частей, значит каждую можно завернуть в отдельный

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

<h2>Обед</h2>
<section>
  <h3>Первое</h3>
</section>
<section>
  <h3>Второе</h3>
</section>

Многие думают, что <section> — это такой модный <div> и очень ошибаются. Смотрите, я использую HTML5! Нет. Этот элемент несёт определённый смысл и если вы его не понимаете, его лучше вообще не трогать.

Самый яркий пример использования <section> прямо из спецификации — это блок со вкладками.

У вас есть группа вкладок и нажатие на заголовок каждой показывает её содержимое. Такая вкладка — это самый настоящий <section>.

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

Ладно, с секциями разобрались, а что такое <footer>? Если очень коротко, то это такой справочный блок с датой публикации, автором, сносками. И он может быть не один на странице! О нём мы как-нибудь поговорим отдельно.

Итак, <footer> справочный, <section> делит на части. То есть: если в справке есть какие-то структурные части, то почему бы и нет? Бывает, что в подвал сайта кладут много информации, которая помогает сориентироваться: контакты, карту сайта, поиск. Хороший такой, жирненький <footer>.

<footer>
  <section>
    <h3>Поиск</h3>
  </section>
  <section>
    <h3>Справка</h3>
  </section>
</footer>

Даёте каждой секции подходящий заголовок и делите <footer> на части.

Про семантику <section> и других элементов можно почитать на сайте HTML5 Doctor. Некоторые статьи писали авторы спецификации HTML, чтобы помочь разработчикам. Их также много переводили, так что все ссылки есть в описании к видео.

Мораль: используйте новые структурные HTML-элементы только если вы понимаете, как они работают. И не забывайте вставлять заголовки для секций. А если их нет на макетах, доступно их прячьте.

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

Тег HTML »

В тегах HTML, Новый

Раскрытие информации: Ваша поддержка помогает сайту работать! Мы зарабатываем комиссионные за некоторые услуги, которые мы рекомендуем на этой странице. Узнать больше

Элемент

Структура HTML-документа до и после HTML5 — вот что изменилось

Что делает HTML-тег

Элемент

Отображение

Блок

Использование

Семантика

Использование