Футер сайт: Назначение Header и Footer

26.08.2023 alexxlab

Содержание

что такое подвал, пример меню в футере

Футер сайта (подвал, англ. footer – заголовок) представляет собой сквозной структурный элемент, который расположен внизу страницы. Он противоположен шапке (хедеру) – сквозной верхней части сайта. Футер обычно используется как блок с дополнительной информацией, а также для перелинковки. Реже он выступает в качестве вспомогательного инструмента для сбора лидов.

Источник: https://www.wildberries.ru

Что размещать в футере

В нем чаще всего указываются данные, которые нужно быстро и легко найти на любой веб-странице. В связи с этим в подвале частично дублируется содержание хедера. Конкретная информация зависит от типа ресурса, его дизайна, тематики, содержания других блоков и пр. К типичным примерам относится навигация, контакты, правовая информация и тому подобное.

• Дублирование контактов

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

• Сведения об авторстве

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

• Информация о партнерах

В подвале можно написать о том, кто поддерживает конкретный проект, взаимодействует с компанией и пр. Это прекрасно работает на увеличение доверия к ресурсу. Это удобное решение, если партнерские ссылки размещаются по договору на каждой странице сайта. Примером могут быть ссылки на приложения, некоторые дочерние проекты, поддомены и тому подобное.

• Обратная связь и прочие лид-формы

Решив добавить в футер элементы для связи с компанией либо для отправки своих контактных данных (для заказа обратного звонка, подписки на рассылку и пр.), можно повысить удобство пользованием ресурсом. Также это поможет в сборе базы заинтересованных посетителей ресурса.

Источник: https://ostin.com

• Соц. сети

Кнопки на группы в соц. сетях или виджеты, отражающие число участников, логически примыкают к блоку с контактами. В то же время они отличаются от них. Поэтому их нередко размещают именно в подвале либо дублируют, если они уже есть в боковых блоках/хедере.

• Возрастное ограничение

Актуально для сайтов, информация на которых предназначена для определенной возрастной категории пользователей (18+). Если это нужно указать, то обычно это делают в футере.

• Политика конфиденциальности/защита персональных данных

Если на сайте предусмотрено прохождение регистрации либо на нем каким-то образом собирается персональная информация, то следует размещать пользовательское соглашение, правовые документы об использовании Cookies, политику конфиденциальности и пр.

• Карта

Размещение интерактивной карты может повысить удобство для пользователей, которым важна точная локализация компании (например, если человек ищет что-то рядом с работой или со своим домом). Это также может способствовать повышению доверия, ведь это своего рода подтверждение, что компания реальна и существует за пределами Сети.

• Другая информация

В подвале можно разместить информацию о наличии противопоказаний (по закону этот дисклеймер должен сопровождать любые публикации/материалы на сайте определенной тематики, например медицинской), сведения о регистрации, сообщение, что сайт не является публичной офертой.

• Дополнительное меню

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

• Карта сайта

В футере традиционно размещается ссылка на страницу с кликабельным иерархичным списком всех материалов.

• Кнопка «Наверх»

Ее добавляют для большего удобства пользователей. Они могут кликнуть по ней и сразу оказаться вверху страницы, а не скроллить назад (особенно актуально, когда это большой каталог).

• Облако тегов

Его используют для дополнительной навигации по записям блога. Чтобы избежать нагромождения, в футер добавляются только самые популярные/важные теги.

• Счетчики

Они размещаются в доступном для просмотра виде на информационных проектах, где по посещаемости можно судить о привлекательности площадки как о месте для размещения рекламы.

Источник: официальный сайт Фонда защиты диких животных, https://wwf.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