<footer>

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

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

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

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

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

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

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

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

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

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

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

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

На практике

Секция статьи "На практике"

Дока Дог

Секция статьи "Дока Дог"

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