Footer html что это
Что такое семантическая вёрстка и зачем она нужна
Давным-давно (лет пятнадцать назад) почти все делали сайты и не переживали о том, что под капотом. Верстали таблицами, использовали всё, что попадётся под руку (а попадались в основном div и span) и не особо заморачивались о доступности. А потом случился HTML5 и понеслось.
Семантическая вёрстка — подход к разметке, который опирается не на содержание сайта, а на смысловое предназначение каждого блока и логическую структуру документа. Даже в этой статье есть заголовки разных уровней — это помогает читателю выстроить в голове структуру документа. Так и на странице сайта — только читатели будут немного другими.
Почему семантика важна
Чтобы сделать сайт доступным. Зрячие пользователи могут без проблем с первого взгляда понять, где какая часть страницы находится — где заголовок, списки или изображения. Для незрячих или частично незрячих всё сложнее. Основной инструмент для просмотра сайтов не браузер, который отрисовывает страницу, а скринридер, который читает текст со страницы вслух.
Этот инструмент «зачитывает» содержимое страницы, и семантическая структура помогает ему лучше определять, какой сейчас блок, а пользователю понимать, о чём идёт речь. Таким образом семантическая разметка помогает большему количеству пользователей взаимодействовать с вашим сайтом. Например, наличие заголовков помогает незрячим в навигации по странице. У скринридеров есть функция навигации по заголовкам, что ускоряет знакомство с информацией на сайте.
Чтобы сайт был выше в поисковиках. Компании, которые создают поисковики, не разглашают правила ранжирования, но известно, что наличие семантической разметки страниц помогает поисковым ботам лучше понимать, что находится на странице, и в зависимости от этого ранжировать сайты в поисковой выдаче.
Классический пример — расписание поезда «Сапсан» в выдаче Google.
Разработчики tutu.ru сверстали таблицу тегом table вместо div и их сниппет оказался в выдаче Google по важному коммерческому запросу.
Семантика прописана в стандартах. Многие разработчики по старинке пользуются конструкциями типа
Ну и представьте, насколько проще читать вместо
Основные семантические теги HTML
Среди «старых» тегов из ранних версий HTML тоже есть семантические — например, тег
, который обозначает параграф. При этом теги или не семантические, потому что они не добавляют смысла выделенному тексту, а просто определяют его внешний вид.
Но в актуальной версии стандарта HTML Living Standard есть семантические теги почти для всех основных частей сайта, и лучше пользоваться ими. Вот несколько примеров семантических тегов.
Как разметить страницу с точки зрения семантики
Процесс разметки можно разделить на несколько шагов с разной степенью детализации.
Более подробно методика создания семантической разметки описана в навыке «Создание семантической разметки по макету» и профессиональных курсах HTML Academy.
Создание семантической разметки по макету
Навык, без которого фронтенд-разработчикам ну просто никуда.
Сомневаюсь, какие теги использовать
Есть простые правила для выбора нужных тегов.
Как точно не нужно делать
Не используйте семантические теги для украшательств. Для этого есть CSS.
Может показаться, что некоторые теги подходят для того, чтобы сделать страницу покрасивее, подвигать текст или добавить ему интервалов. Но то, что браузер по умолчанию отображает теги как-то, как вам нужно, не значит, что это нужно использовать. Посмотрим на пример.
Здесь сразу несколько ошибок:
использован, чтобы визуально раздвинуть текст. На самом деле этот тег используется для выделения параграфов.
А любое выделение, сдвиг или иные превращения текста можно выполнить с помощью CSS.
Поэтому используйте семантические теги по назначению.
Как создать статический футер с помощью HTML и CSS
Эта серия мануалов покажет вам, как создать и настроить веб-сайт с помощью CSS, языка таблиц стилей, используемого для управления внешним видом сайтов. Вы можете выполнить все инструкции по порядку, чтобы создать тестовый веб-сайт и познакомиться с CSS, или вразброс использовать описанные здесь методы для оптимизации других проектов CSS.
Для работы с CSS вам нужно иметь базовые знания по HTML, стандартному языку разметки, который используется для отображения документов в браузере. Если ранее вы не работали с HTML, рекомендуем предварительно изучить первые десять руководств серии Создание веб-сайта с помощью HTML.
В последнем мануале этой серии по CSS мы поговорим о том, как создать статический футер и зафиксировать его (он будет оставаться в нижней части области просмотра, когда посетитель прокручивает страницу вниз).
Методы, которые использованы здесь, можно применить к любым другим проектам, разработанным на CSS и HTML.
Требования
Чтобы выполнить эти инструкции, вам следует подготовит среду согласно мануалу Подготовка проекта CSS и HTML с помощью Visual Studio Code.
В качестве контента для футера мы используем несколько значков социальных сетей. Если вы тоже хотите использовать эти значки, загрузите их и сохраните в папке images как:
Примечание: Чтобы загрузить изображение, перейдите по нужной вам ссылке, нажмите Ctrl и кликните левой кнопкой (на Mac) или правой кнопкой мыши (в Windows) по изображению, выберите «Сохранить изображение как» и сохраните его в своей папке images. Сохраните изображения с указанными именами.
После этого вы можете приступать к работе.
Создание класса для оформления футера
Сначала мы определим класс footer, добавив следующий фрагмент кода в конец файла styles.css:
Сохраните файл styles.css. Как всегда, новый раздел кода начинается с комментария (/* Footer */). Затем мы определяем класс footer и объявляем несколько правил стиля. Первое правило объявляет параметр position со значением fixed, что означает, что элемент не будет перемещаться из указанного вами расположения, когда пользователь будет прокручивать страницу вниз. Это расположение задается следующими двумя объявлениями: bottom:0 и left:0 – 0 пикселей слева и 0 пикселей снизу области просмотра браузера.
Откорректировав эти значения, вы можете изменить расположение элемента на странице. Однако помните: любое значение, кроме нуля, должно включать суффикс px после числа. В наборе правил также указаны ширина, высота и цвет фона класса footer.
Добавление футера на страницу
Чтобы добавить контент для футера, мы создадим новый контейнер
Сохраните файл index.html и загрузите его в браузере.
Если вы не знаете, как открыть оффлайн-файл, обратитесь к нашему руководству Основы работы с html-элементами (раздел Просмотр оффлайн HTML-файла в браузере).
На экране будет пустой контейнер для футера, который остается на месте при прокрутке страницы вверх и вниз.
Теперь можно добавить контент – сделаем это в следующем разделе руководства.
Добавление и оформление контента футера
Следующим шагом будет добавление и стилизация элементов меню в левой части футера. Эти пункты меню можно использовать для ссылки на другие страницы вашего сайта. В настоящее время на нашем сайте есть только одна страница, поэтому вы можете использовать условные ссылки. Если позже вы создадите новые страницы для вашего сайта, вы сможете добавить в футер новые пункты меню и прикрепить правильные ссылки.
Вернитесь к styles.css и добавьте следующий фрагмент кода в конец файла:
Давайте подробно рассмотрим каждый из созданных нами наборов правил:
Теперь давайте пропишем в файле index.html пункты меню. Вставьте следующий выделенный фрагмент кода в контейнер footer, который вы создали ранее:
Этот фрагмент кода добавляет два элемента меню (about и credits), связывает эти элементы и стилизует текст с помощью только что созданных классов footer-text-left и a.menu.
Сохраните оба файла и перезагрузите веб-страницу в браузере. В левой части закрепленного футера появится три пункта меню: home, about и credits. При наведении на них фон будет менять свой цвет на желтый.
Добавление значков социальных сетей
Давайте добавим в наш футер значки социальных сетей, которые можно использовать для ссылки на свои учетные записи. Если вы хотите использовать значки для других соцсетей, вы можете найти их бесплатные логотипы в Интернете и загрузить их в папку images, а затем добавить на свою страницу. Откройте styles.css и вставьте следующие три набора правил в конец файла:
Остановимся на этих правилах подробнее:
Примечание: Не забудьте заменить нашу ссылку в коде ссылками на свои соцсети. При необходимости откорректируйте пути к файлам.
Этот фрагмент кода создает контейнер
Также мы добавили атрибут alt – это альтернативный текст, описывающий каждый значок. При создании веб-сайтов альтернативный текст следует добавлять ко всем изображениям, чтобы обеспечить доступность сайта для людей, использующих скринридеры. Чтобы узнать больше об использовании альтернативного текста с HTML, читайте мануал Добавление изображения на веб-страницу с помощью HTML.
Сохраните файл index.html и перезагрузите его в браузере. Теперь на вашей странице должен быть зафиксированный футер, содержащий в правой части ссылки на ваши социальные сети. Ссылки должны менять цвет фона при наведении на них курсора.
Заключение
Мы добавили статический футер, который всегда отображается в нижней части области просмотра, когда посетитель прокручивает страницу вниз. Вы можете продолжить изучение возможностей CSS, изменив значения в созданных нами классах или добавив в файл index.html новый контент.
Поздравляем, работа над тестовым сайтом завершена! Теперь вы знаете, как стилизовать HTML-элементы с помощью определения классов и псевдоклассов CSS. Вы также ознакомились с несколькими вариантами верстки сайта, которые можно реализовать через различные HTML-элементы и CSSстили.
CSS можно изучать бесконечно, но описанные в этой серии методы обеспечат вам прочную основу для развития ваших навыков работы с CSS и подготовят вас к изучению других инструментов (таких как JavaScript) и фреймворков (как, к примеру, Tailwind). Также у вас теперь есть все файлы и папки, необходимые для развертывания готового веб-сайта в облаке.
Для практики попробуйте изменить что-нибудь на веб-сайте, который у вас получился. Вот пара идей, которые могут вас заинтересовать:
Что такое футер и что там разместить
Во время создания дизайна сайта или его SEO-оптимизации важно сделать так, чтобы им было удобно пользоваться. Хорошее юзабилити складывается, когда все элементы на странице продуманы: начиная шапкой и заканчивая подвалом. Зачастую оптимизацией последнего пренебрегают.
В статье разбираемся, почему важен подвал сайта, чем полезен и как его грамотно использовать.
Что такое футер сайта
Футер или подвал сайта (англ. footer) — это блок в самом низу страницы с информацией, которая может быть полезна посетителю.
Аналитика
Из исследования, проведенного на основе 1.000.000 посетителей, было подсчитано, что большая часть времени проводится за линий сгиба экрана.
Убедиться можно самим, посмотрев отчет «карта скроллинга» в Яндекс.Метрике.
Кроме того некоторую информацию (телефон для обратной связи, электронную почту и т.п.) могут искать намеренно в футере страницы, если не нашли ее в шапке. Поэтому важно убедиться, что вы предоставили посетителю достаточно информации перед тем, как он покинет сайт.
Во время тестирования сайта в компании UserTesting заметили, что размещение призыва к действию (CTA) в подвале помогло повысить конверсию на 50% за двухнедельный период!
Компания SmartInsights также сообщила, что они увидели почти 24% рост конверсии продаж, после оптимизации нижнего колонтитула своего сайта. Доработка подвала заключалась в грамотной перелинковке. Как ее сделать разберемся далее в одноименной главе.
Что разместить в футере сайта
На самом деле в подвале можно разместить много элементов. Однако обычно ограничиваются несколькими внутренними ссылками и кнопками соц. сетей. Важно найти баланс между функциональностью и простотой. Далее говорим, что можно использовать в подвале и приводим качественные примеры.
3 обязательных элемента
В каждом подвале должны быть 3 вещи:
3 обязательных элемента на примере www.healthline.com
Адрес
Зачастую страницы специально листают до конца, чтобы найти контакты. Поэтому контактную информацию правильно размещать не только в шапке, но и в подвале. Кроме того, если вы указываете адрес у регионального сайта, то это позволяет безболезненно (без переспама) продублировать вхождение названия города.
Карта
В дополнении к адресу в подвале может размещаться карта. Это позволит задержать посетителя на сайте и не перенаправлять его на сторонние ресурсы. Однако следите, чтобы из-за карт не пострадала скорость загрузки сайта.
Карта сайта на примере 24stoma.ru
Обратная связь
Хорошей практикой считается размещать телефон для связи в подвале. Причем не просто текстом, а ссылкой, чтобы можно было сразу перейти в номеронабиратель с портативных устройств.
Кроме того можно использовать и другие средства связи: Viber, WhatsApp, электронную почту.
Способы обратной связи в подвале на примере 63plitka.ru
CTA (Call to action)
В подвале должны быть кнопки или лид-формы, побуждающие совершить действие.
Перелинковка
Включайте только самые важные страницы или разделы в качестве ссылок в подвале. Это могут быть основные/популярные разделы (меню) в вашем интернет-магазине, страницы с акциями и другие ссылки, которые могут заинтересовать посетителей. Для простоты восприятия разделяйте ссылки на столбцы.
Социальные кнопки
Кнопки на соц. сети размещают или в шапке сайта, или в подвале. Также можно указывать количество подписчиков для подтверждения вашей социальной популярности.
Кнопки соц. сетей в футере на примере www.mi.com
Преимущества
Подвал это отличное место, чтобы похвастаться вашими достижениями. Это поможет зарекомендовать себя с лучшей стороны. Используйте для этого небольшие графические баннеры. Они могут быть статическими (информация не обновляется) и динамическими в виде виджетов (данные обновляются).
Примеры статических
Примеры динамических (виджетов)
Виджет курса валют будет очень кстати в некоторых тематиках. Например, для агрегаторов туров или для интернет-магазинов.
Курс валют в футере на примере www.teztour.ua
Виджет он же «Бейдж с рейтингом организации на сайт» от Яндекса. Мало того, что показывает ваш актуальный рейтинг на Яндекс.Картах, так и позволяет быстро оставить отзыв на сайт.
Рейтинг организации в футере на примере greencardamon.ru
Виджеты оценок и отзывов других сервисов повышают доверие к ресурсу.
Так же можно использовать виджеты погоды. Обычно их применяют на сайтах отелей.
Виджет погоды в футере на примере voschod.ru
Кроме этого на информационных порталах могут размещаться счетчики посещаемости. Они так же позволяют повысить доверие к ресурсу.
Виджеты посещаемости в футере на примере www.fontanka.ru Логотип
Логотип
Размещайте логотип со ссылкой на главную страницу сайта. Так вы повысите узнаваемость бренда и упростите навигацию по сайту.
Логотип в подвале на примере www.belcantofund.com
Возраст домена
Часто в подвале размещают информацию о возрасте сайта. Это может быть неким плюсом в плане доверия к ресурсу, если он имеет почтенный возраст. Однако если вы забудете проставить актуальный год, то сайт будет выглядеть заброшенным, что плохо.
Поэтому используйте простую PHP функцию для вывода актуального года автоматически:
Возраст домена в подвале на примере www.cvz.ru
Мобильные приложения
Ссылки на скачивание мобильных приложений как нельзя кстати разместить в подвале сайта.
Ссылки на приложения в подвале на примере www.svyaznoy.ru
Текст в подвале
В некоторых тематиках, например в медицинской, стоит указывать текст об отказе от ответственности. Это особенно актуально, когда Google стал очень жестко относиться к E-A-T тематикам.
Также в нижнем блоке может размещаться небольшой текст-информация о сайте.
Описание сайта в подвале на примере www.pepper.ru
В качестве текстовой информации может быть график работы. Актуально для интернет-магазинов, клиник и других коммерческих сфер.
График работы в подвале на примере www.sfe.ru
Способы оплаты
Для интернет-магазинов полезно размещать способы оплаты для наглядности в виде иконок.
Иконки способов оплаты в подвале на примере shop.megafon.ru
Ссылки в подвале сайта
Часто SEO-компании или разработчики размещают обратную ссылку на свой сайт. Отличное место для рекламы? Спросите у Тильды. Кстати говоря, SEO-эффект таких ссылок уже невелик. Раньше их могли использовать для серьезного прокачивания ссылочной массы, но это в прошлом.
Карта сайта в подвале
Раньше на большинстве сайтов была карта сайта. Ее обычно размещали как раз в подвале сайта, чтобы ссылка была на нее сквозная. Якобы карта сайта помогает поисковым роботам лучше понять структуру сайта. Но на текущий момент это скорее рудимент, чем реальное средство.
Что еще?
Строка поиска по сайту. Обычно ее размещают в шапке сайта, но можно продублировать и нижнем колонтитуле.
Строка поиска в подвале на примере www.vo-da.ru
Популярные посты. Это поможет подогреть интерес к вашим статьям.
Популярные публикации в подвале на примере ahrefs.com/blog/
Используемые бренды, партнеры.
Бренды в подвале на примере www.walmart.com
Рекомендации по футеру
Мы рассмотрели основные элементы подвала сайта, которые могут быть полезными для посетителей. Их получилось достаточно много и теперь важно выбрать наиболее подходящие именно вам. Оформление же футеров ограничивается только вашей фантазией. Кроме этого:
Что такое футер и как его оформить: как называется нижняя часть сайта и что на ней разместить – примеры оформления подвалов страниц
В статье мы поговорим про интересный структурный элемент, без которого сейчас не обходится практически ни один виртуальный ресурс. Мы узнаем футер (footer), подвал сайта, что это такое, примеры использования в различных ролях на веб-ресурсах.
Это в некоторой роли противоположность хедера – то есть шапке, полю, расположенному в верхней части. Соответственно, герой нашего обзора, располагается внизу. Именно отсюда такое название, foot – нога. Это поле идеально выполняет функции перелинковки. Но на этом возможности не заканчиваются. Это и инструмент для сбора лидов, просто информационная часть для своего рода краткой консультации, способ повышения юзабилити и помощь в навигации для клиента. Такой вот ящик со ссылками на все случаи жизни, каждый раз, когда пользователь оказывается в тупике на любой странице, он может прокрутить ее до низа и уже оттуда совершить дальнейший переход.
Что разместить в футере сайта, и для чего он нужен
Этот элемент выполняет сразу несколько важных задач. И в зависимости от оформления может быть направлен на некоторые из них или сразу на все.
Итак, основные функции:
Как сделать подвал сайта
Самый простой и удобный способ получить сайт с корректной версткой всех элементов – это заказать услугу в «Студии 17». Это избавит вас сразу от массы проблем. И поможет раскрыть весь потенциал футера, превратив его в выгодный инструмент, который действительно выполняет львиную долю работы.
Напомним, что мы работаем исключительно через шаблоны WordPress, а значит, решаем любую задачу в максимально сжатые сроки. При заказе услуги по веб-разработке идеальный нижний элемент будет прилагаться по умолчанию. Но по желанию нашего клиента мы можем доработать его и в отдельном порядке.
Что должно быть в подвале сайта
Ответ на этот вопрос очень простой – все, что захотите. Разумеется, нагромоздить все возможные варианты будет ошибкой. Слишком перегруженный низ вызовет противоположную реакцию. Для пользователей это будет место, до куда лучше не листать. А вот если четко выбрать несколько целей, парочку небольших модулей и ссылок, поместить их вниз, они будут смотреться органично и хорошо исполнять свои функции. Ориентироваться стоит на дизайн, визуальную логику, фактическую необходимость. Так что для каждого проекта свои критерии, все зависит от особенностей.
Далее мы рассмотрим все варианты, что помещать в нижнюю часть. Это не означает, что все указанные ниже методики нужно обязательно использовать. Напротив, необходимо ограничиться лишь подходящими для вас. Хотя совмещать почти все – вполне возможно. Главное — эргономично и не отталкивающе все это разместить. А это уже зачастую задача для профессионалов.
Сведения об авторстве
Это традиционная часть. Располагается зачастую в самом низу, хотя есть и иные варианты. Краткая заметка об авторских правах, а также правилах копирования, распространения информации, содержащейся на сайте. Указывается разработчик, иногда условия сбора персональных данных, принципы работы cookies и схожее.
Информация о партнерах
Это мера помогает в первую очередь, сыграть на репутацию. Если уровень компаньонов высокий. К примеру, бренды, которые в настоящий момент на слуху. Кроме того, самые именитые клиенты часто указываются в этом поле. Это также сообщает о том, что компания вполне способна работать с крупными заказами, очень высокими требованиями. Ведь интересы этих брендов были удовлетворены в полной мере. Доверие – это главная составляющая продаж. А футер страницы – это способ очень быстро его завоевать. Поэтому логично будет им воспользоваться.
Контакты
Разумеется, нет смысла прикреплять сюда все возможные способы связи и коммуникации. Ведь для этого зачастую существует отдельная страничка. Там все написано подробно и четко. Но вот ключевые аспекты, физический адрес главного отдела продаж и номер телефона для связи с консультантом – это чуть ли не обязательный пункт. Чтобы клиент в любой момент времени, когда решил связаться с проектом или сохранить данные в свой ежедневник, органайзер, смогу бы это сделать. Часто размещается еще и адрес электронной почты. Ведь корпоративные клиенты как раз работают через подобный способ коммуникации.
Социальные сети
Не секрет, что сейчас это один из главных источников притока лидов. Их популярность просто огромна. Разумеется, качественные показатели зависят от конкретной сети, в какой-то сфере лучше работает Инстаграм, в другой Вконтакте. Фейсбук, Твиттер, Дзен – все зависит от того, в каких именно социальных сетях у проекта есть свои сообщества. И здесь не работает принцип, больше – лучше. Логично ограничиться 3-4 вариантами. И разместить прямые ссылки на эти сообщества в нижней зоне. Разумеется, необходимо четко выбрать размер иконок.
Стоит помнить, что как основной ресурс ссылается на социальные сети, так и они, в свою очередь, должны направлять потенциальных клиентов обратно. Создается некий круговорот. Тем более, в большей части сетей просто нет возможности разместить механизм продаж, и покупка все равно будет происходить уже на веб-ресурсе.
Лид формы
Различные вариации перехода на заказ или связь с консультантом. Разумеется, у нас уже есть здесь контакты. Но, помимо них, возможно, хорошей идеей будет расположить прямые переходы в каталог или, что чаще, в корзину. А также на форму отправки письма в техническую поддержку или для получения консультации. Хотя, стоит помнить, что если на ресурсе есть функция живого чата, то надобность в такой форме сомнительная. Захламлять поле тоже не очень логично, так же как и слишком навязчивое давление на пользователей. Лучше все стараться оформить скромно и со вкусом. Помните, как называется низ сайта – подвал. То есть, помещение со вспомогательными функциями. Они не должны быть «громче», чем основные.
Карта
Если вы собираетесь использовать такой элемент, то есть совсем немного методов для этого. Боковые меню или нижнее. Это прекрасная возможность визуализировать адрес, сразу показать, насколько близко находится основное здание. Пользователь, бросая беглый взгляд, зачастую узнает местность на карте. И в его голове уже сразу откладывается, что вот там-то конкретно расположился магазинчик. И эту информацию он, скорее всего, уже не забудет. Если будет поблизости, заглянет посмотреть вживую.
Политика конфиденциальности
Базовые условия часто тоже располагаются здесь. Но это уже не слово о маркетинге. Ведь оформление подвала сайта часто имеет просто информационный подтекст. А также, собирая информацию пользователя, владелец обязан об этом уведомить. Это требование современного законодательства. И то, что персональные данные будут обрабатываться, собираться, использовать – гласная информация. Скрывать ее недопустимо.