HTML тег <footer>

Значение и применение

Тег <footer> (нижний колонтитул) содержит информацию, которая обычно помещается в нижнем колонтитуле страницы, например сведения об авторских правах, другую правовую информацию, некоторые ссылки для навигации по сайту и тому подобное.

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

HTML
<body>
	<h1>Важный заголовок</h1> 
	<article> <!-- начало первой статьи -->
		<h2>Статья о бытие</h2> 
		<p>Информация про бытие...</p>
		<footer>Сноски, ссылки и тому подобное <!-- "подвал" статьи -->
			<address>Информация об авторе статьи</address>
		</footer>
	</article><!-- конец первой статьи -->
	<article> <!-- начало второй статьи -->
		<h2>Статья о бытие 2</h2> 
		<p>Информация про бытие 2...</p>
		<footer>Сноски, ссылки и тому подобное <!-- "подвал" статьи -->
			<address>Информация об авторе статьи</address>
		</footer>
	</article> <!-- конец второй статьи -->
	<footer>сведения об авторских правах, навигация по сайту, счетчики... <!-- "подвал" сайта -->
		<address>Контактные данные автора сайта</address>
	</footer>
</body>
<header></header>
<nav></nav>
<section></section>
<section></section>
<aside></aside>
<footer></footer>
Пример размещения тега <footer> на странице.

Тег <div> имеет довольно общий характер — это просто элемент на уровне блока, используемый для разбиения страницы на разделы. Одна из целей HTML 5 заключается в предоставлении в распоряжение разработчиков широкого выбора из других, семантически более осмысленных тегов.

Смысловые элементы

<header></header>
<nav></nav>
<section></section>
<aside></aside>
<section></section>
<footer></footer>

Только <div>

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
Расположение блоков одинаковое, но смысловые теги объясняют назначение каждой части страницы.

HTML 5 включает в себя множество различных тегов, чьи имена отражают тип их содержимого, и эти теги могут использоваться вместо тега <div>. HTML 5 предлагает новые блочные семантические элементы для определения различных частей веб-страницы, вы можете детально с ними познакомиться в статье учебника HTML 5 "Теги разметки страницы".

Подвал может относиться ко всей странице или к ближайшему разделу. Внутри него нельзя размещать другой <footer> или <header>. Элемент не прикрепляет содержимое к нижнему краю окна: расположение управляется CSS.

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

Спецификация: multipage

Поддерживается во всех основных браузерах с 2015 года.

Показать браузеры
Совместимостьhtml.elements.footer
ВозможностьКомпьютерыМобильные
ChromeEdgeFirefoxOperaSafariChrome AndroidFirefox for AndroidOpera AndroidSafari on iOSSamsung BrowserWebView AndroidWebView on iOS
footer✓5✓12✓4✓11.1✓5✓18✓4✓11.1✓4.2✓1.0✓4.4✓4.2

поддерживаетсяс ограниченияминет поддержкинет данных≤31 — не позднее версии 31

Примеры, попробуйте сами

Заключительная часть

Измените сведения в footer. Здесь он завершает статью.

index.html
HTML
<article>
  <h2>Новая заметка</h2>
  <p>Основной текст.</p>
  <footer><p>Автор: Анна.</p></footer>
</article>

Значение CSS по умолчанию

CSS
footer {
display: block;
}

Поддержка глобальных атрибутов

Элемент поддерживает "глобальные атрибуты".

Атрибуты событий

Элемент поддерживает "атрибуты событий".