Html футер: Тег | htmlbook.ru

Разное 

Содержание

Как добавить подвал сайта. Тег — журнал «Доктайп»

  • 25 января 2023

Справочник

Нейрокекс

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

Синтаксис тега <footer>

<footer>
  <p>© HTML Academy, 2023. Все права защищены.</p>
</footer>

Спецификация HTML

Тег является частью спецификации HTML Living Standard.

Семантический или нет

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

Примеры использования

Подвал с меню и контактной информацией:

<footer>
  <nav>
    <ul>
      <li><a href="#">О нас</a></li>
      <li><a href="#">Контакты</a></li>
      <li><a href="#">Правила</a></li>
    </ul>
  </nav>
  <p>Телефон: +7 (123) 456-78-90</p>
  <p>Email: info@htmlacademy. ru</p>
</footer>

Подвал со ссылками на социальные сети:

<footer>
  <p>Подписывайтесь на нас в социальных сетях:</p>
  <ul>
    <li><a href="#">Вконтакте</a></li>
    <li><a href="#">Телеграм</a></li>
  </ul>
</footer>

Для чего использовать тег <footer>

  • Разместить копирайт и авторские права.
  • Отобразить контактную информацию.
  • Разместить дополнительное меню навигации.
  • Добавить ссылки на социальные сети.
  • Показать ссылки на политику конфиденциальности и пользовательское соглашение.
  • Разместить логотип и ссылку на главную страницу.
  • Отобразить информацию о партнёрах и спонсорах.

Атрибуты тега <footer>

  • id — уникальный идентификатор элемента.
  • class — определяет имя класса, которое позволяет связать тег со стилевым оформлением.

Глобальные атрибуты

Тег поддерживает все глобальные атрибуты HTML.

Ограничения

  • Тег должен находиться внутри контейнера <body>.
  • На странице может быть только один тег <footer>.

Нюансы

  • В теге <footer> допустимо использовать другие элементы, например, <p>, <a> или <span>.
  • Вместо <footer> рекомендуется использовать тег <address> для указания контактной информации, а также ссылки на связанные документы.

Поддержка браузерами

Тег <footer> поддерживается всеми современными браузерами. Актуальная информация — на caniuse.

Альтернативные теги

  • <div> — можно использовать для создания контейнера, который содержит информацию, характерную для тега <footer>.
  • <section> — можно использовать для группировки связанных элементов на странице. Внутри <section> можно использовать тег <header> для заголовка и тег <footer> для нижнего колонтитула.

Чем заменить тег

  • Если нужно создать колонтитул для элемента, можете использовать тег <div> или <section>.
  • Если нужно указать контактную информацию автора или ссылки на связанные документы, можете использовать тег <address>.

Актуальность

Тег <footer> является актуальным, можете использовать его в веб-разработке.

Хотите узнать больше об HTML-тегах?

Прочитайте справочник по HTML или познакомьтесь с вёрсткой на интерактивных тренажёрах в HTML Academy.

Попробовать

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

ТелеграмПодкастБесплатные учебники

Читать дальше

Справочник по HTML

Основные HTML-теги в 2023 году.

Справочник

  • 31 марта 2023

Глобальные атрибуты HTML

Список основных атрибутов, которые подойдут ко всему.

Справочник

  • 29 марта 2023

Как добавить раздел на страницу. Тег <div>

Синтаксис, примеры использования, основные атрибуты.

Справочник

  • 25 января 2023

Список описаний. Тег <dl>

Синтаксис, примеры использования, основные атрибуты.

Справочник

  • 25 января 2023

Пункт выпадающего списка. Тег <option>

Синтаксис, примеры использования, основные атрибуты.

Справочник

  • 25 января 2023

<ul>

Синтаксис, примеры использования, основные атрибуты.

Справочник

  • 25 января 2023

<video>

Синтаксис, примеры использования, основные атрибуты.

Справочник

  • 25 января 2023

<datalist>

Синтаксис, примеры использования, основные атрибуты.

Справочник

  • 25 января 2023

<caption>

Синтаксис, примеры использования, основные атрибуты.

Справочник

  • 25 января 2023

Как правильно добавить секцию на страницу. Тег <section>

Синтаксис, примеры использования, основные атрибуты.

Справочник

  • 25 января 2023

Съезжает футер (html, css) — Stack Overflow на русском

Вопрос задан

Изменён 1 год 4 месяца назад

Просмотрен 53 раза

Проблема в том, что когда товары не находятся, футер съезжает вот таким образом.

Знает кто как решить?

Вот html:

<div>
  <footer>
    <nav>
      <img src="../../static/main/img/logo-orange.svg">
      <a href="">Головна</a>
      <a href="/products">Страви</a>
      <a href="#">Ціни</a>
      <a href="#">Для кур’єрів</a>
    </nav>
    <a href="#">Зареєструватися</a>
    <a href="#">Увійти</a>
  </footer>
</div>

Css:

.container {
  width: 1240px;
  margin: 0px auto;
  min-width: 1240px;
}
.footer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-top: 125px;
  margin: 0 auto;
}
.footer__logo {
  margin-top: 70px;
  margin-right: 187px;
}
.footer__el {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  margin-top: 57px;
  /*max-width: 467px;*/
  width: 100%;
  margin-right: 42px;
  padding: 15px;
  font-family: Century Gothic;
  font-style: normal;
  font-weight: bold;
  font-size: 15px;
  line-height: 18px;
  color: #838B89;
  -webkit-transition: 0.
 
 5s;
  -o-transition: 0.5s;
  transition: 0.5s;
  margin-bottom: 50px;
}
.footer__el:hover {
  color: #CECECE;
}
.footer__reg {
  font-family: Century Gothic;
  font-style: normal;
  font-weight: normal;
  font-size: 15px;
  line-height: 18px;
  color: #838B89;
  margin-left: 81px;
  margin-top: 71px;
  padding-right: 28px;
  opacity: 0.7;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
}
.footer__reg:hover {
  color: #585858;
  opacity: 1;
}
.footer__login-button {
  font-family: Century Gothic;
  font-size: 15px;
  line-height: 18px;
  color: #FFFFFF;
  background: #FF744E;
  border-radius: 100px;
  width: 128px;
  height: 40px;
  text-align: center;
  padding: 10px 42px;
  margin-top: 60px;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}
.footer__login-button:hover {
  background: #C63E19;
  color: #CECECE;
}

upd. перепроверил дивы, все закрыты, тот что без класса добавил просто так, думал бог поможет футер починить, width: 100% тоже не помогло

  • html
  • css
2

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Как создать нижний колонтитул в HTML?

Как создать нижний колонтитул в HTML?

Как создать нижний колонтитул в HTML?

share-outline Бесплатный курс Javascript — Освоение основ

Автор: Мринал Бхаттачарья

Бесплатно

star 4.8

Зачислено:

20315

90 009 Бесплатный курс по Javascript — освоение основ

Мринал Бхаттачарья

Бесплатно

Начало Обучение

Обзор

Нижний колонтитул — это нижний раздел документа, расположенный под основным разделом или телом. Тег