HTML тег
❮ Назад Вперед ❯
Тег <footer> выделяет нижний колонтитул (“подвал”) веб-сайта или раздела. Как правило, в нем размещается информация об авторских правах, контактные данные, ссылки для навигации и т.д.
В пределах одной страницы можно разместить несколько тегов <footer>. К примеру, можно разместить нижний колонтитул внутри тега <article> для хранения относящейся к статье информации (ссылки, сноски, и т.д.).
В нем могут содержаться другие HTML элементы, кроме тегов <footer> и <header>.
Тег <footer> недавно вошел в спецификацию HTML 5, он поддерживается всеми браузерами.
Если в нижнем колонтитуле содержится контактная информация, то ее необходимо размещать в теге <address>.
Содержимое тега пишется между открывающим (<footer>) и закрывающим (</footer>) тегами.
Пример
<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</title>
<style>
.
header {
height: 40px;
padding: 20px 20px 0;
background: #e1e1e1;
}
.main-content {
height: 60vh;
padding: 20px;
}
footer {
padding: 10px 20px;
background: #666;
color: white;
}
a {
color: #00aaff;
}
</style>
</head>
<body>
<div>Заголовок / Меню</div>
<div>
<h2>Основной контент</h2>
<p>Это какой-то параграф. </p>
</div>
<footer>
<p>Компания © W3docs. Все права защищены.</p>
</footer>
</body>
</html>
Попробуйте сами!
Результат
Тег <footer> поддерживает глобальные атрибуты и атрибуты событий.
Как добавить стиль к тегу <footer> ?
Распространенные свойства для изменения визуальной насыщенности/выделения/размера текста внутри тега <footer>:
- CSS свойство font-style задает стиль шрифта: normal | italic | oblique | initial | inherit
- CSS свойство font-family создает приоритетный список названий семейства шрифтов и/или общее имя шрифтов для выбранных элементов.
- CSS свойство font-size задает размер щрифта.
- CSS свойство font-weight устанавливает насыщенность шрифта.
- CSS свойство text-transform задает регистр текста (заглавные или строчные буквы).
- CSS свойство text-decoration устанавливает оформление текста. Оно является сокращенным свойством для text-decoration-line, text-decoration-color, text-decoration-style.
Цвет текста внутри тега <footer>:
- CSS свойство color определяет цвет контента и оформления текста.
- CSS свойство background-color устанавливает фоновый цвет элемента.
Стили форматирования текста для тега <footer>:
- CSS свойство text-indent указывает размер отступа первой строки в текстовом блоке.
- CSS свойство text-overflow указывает, как будет отображаться пользователю строчный текст, выходящий за границы блока.
- CSS свойство white-space указывает, как будут отображены пробелы внутри элемента.
- CSS свойство word-break указывает перенос строки.
Другие свойства для тега <footer>:
- CSS свойство text-shadow добавляет тень к тексту.
- CSS свойство text-align-last выравнивает последнюю строку текста.
- CSS свойство line-height устанавливает межстрочный интервал.
- CSS свойство letter-spacing устанавливает расстояние между буквами/символами в тексте.
- CSS свойство word-spacing устанавливает расстояние между словами в тексте.
| HTML | WebReference
- Содержание
- Синтаксис
- Закрывающий тег
- Атрибуты
- Пример
- Спецификация
- Браузеры
Элемент <footer> (от англ. footer — нижний колонтитул, подвал) задаёт «подвал» сайта или раздела веб-страницы, в нём может располагаться имя автора, дата документа, контактная и правовая информация.
<footer> нельзя вкладывать внутрь другого <footer>, а также внутрь элементов <address> и <header>.
Внутри <footer> не должно быть элемента <main>.
Синтаксис
<footer> </footer>
Закрывающий тег
Обязателен.
Атрибуты
Для этого элемента доступны универсальные атрибуты и события.
Пример
<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>footer</title> </head> <body> <header> <h2>Персональный сайт Кристины Ветровой</h2> </header> <article> <h3>Добро пожаловать!</h3> <p>Рада приветствовать вас на своем сайте.</p> </article> <footer> Copyright Кристина Ветрова </footer> </body> </html>Результат данного примера показан на рис. 1.
Рис. 1. Подвал сайта
Спецификация
| Статус | |
|---|---|
| WHATWG HTML Living Standard | Живой стандарт |
| HTML5 | Рекомендация |
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
- Draft (Черновик спецификации) — первая черновая версия стандарта.
Особняком стоит живой стандарт HTML (Living) — он не придерживается традиционной нумерации версий, поскольку находится в постоянной разработке и обновляется регулярно.
Браузеры
| 9 | 12 | 5 | 11.10 | 5.1 | 4 |
| 2.2 | 4 | 11 | 5 |
Браузеры
В таблице браузеров применяются следующие обозначения.
- — элемент полностью поддерживается браузером;
- — элемент браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.
Число указывает версию браузреа, начиная с которой элемент поддерживается.
Документ
См. также
- <header> и <footer>
- Знакомство с HTML
- Структура в HTML
- Что всё это значит?
Практика
- Копирайт
- Подвал веб-страницы
Автор и редакторы
Автор: Влад Мержевич
Последнее изменение: 09.
10.2018
Редакторы: Влад Мержевич
Тег нижнего колонтитула HTML
❮ Назад Полный справочник HTML Далее ❯
Пример
Нижний колонтитул в документе:
Попробуйте сами »
Другие примеры «Попробуйте сами» ниже.
Определение и использование
<нижний колонтитул> 9Тег 0023 определяет нижний колонтитул документа или раздела.
Элемент