<footer>

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

У <footer> есть роль contentinfo. Благодаря роли пользователи скринридеров могут быстро перемещаться к этой области страницы с помощью специальных клавиш.

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

        
          
          <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>, чтобы поисковик понял, что находится в этом блоке.