HTML :: Тег <footer>

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

Запрещается вкладывать <footer> внутрь другого <footer>, а также внутрь элементов <address> и <header>. Кроме того, сам элемент <footer> не должен содержать элемент <main>.

Синтаксис

	<footer>
		...	
	</footer>	      
	
	Закрывающий тег: обязателен.

Атрибуты

Для элемента доступны универсальные атрибуты и соответствующие атрибуты-события.

Ссылки

Официальный сайт W3C: https://html.spec.whatwg.org/multipage/sections.html#the-footer-element

Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/HTML/Element/footer

Примеры

HTML

htmlCodes

<!-- Указываем тип документа -->
<!DOCTYPE html>
<!-- Начало документа --> 
<html>

<!-- Раздел служебной информации -->
<head>
	<!--  Соощаем браузеру кодировку документа -->
	<meta charset="utf-8">	
	<!-- Задаем базовый адрес текущего документа -->
	<base href="http://fruits.comm/">
	<!-- Заголовок страницы -->
	<title>Все о яблоках</title>
	<!-- Подключаем таблицу стилей CSS -->
	<link href="css/styles.css" rel="stylesheet">
	<!-- Подключаем внешний js-скрипт -->
	<script src="javascript/scripts.js"></script>
</head>

<!-- Тело документа -->
<body>
		
<!-- -------------- Шапка сайта ----------------------- -->
<header class="site_header">
	
	<!-- Имя сайта делаем заголовком верхнего уровня -->
	<h1 class="site_name">fruits.comm</h1>
	
	<!-- Другое содержимое шапки сайта  -->
	Логотип, поисковая панель и др. информация		
	
	<!--  Панель навигации по сайту  -->
	<nav class="site_nav"> 
		<!-- Ссылки на страницы сайта -->
		<a href="apples.html">Яблоки</a>
		<a href="oranges.html">Апельсины</a>
	</nav>
	
</header> 
		
<!-- -------- Боковая панель -------------------- -->
<aside class="site_aside">
	
	<div class="adv_block" id="adv1">
		Например, 1-й блок для сопутствующей рекламы.
	</div>
	
	<div class="adv_block" id="adv2">
		Например, 2-й блок для сопутствующей рекламы.
	</div>
	
</aside>

<!-- ----------- Уникальный контент страницы -------------- -->
<main>
	
	<!-- Делаем разметку для статьи о яблоках -->		
	<article>
		
		<!-- Собственная шапка -->
		<header>
			<!-- Задаем собственный заголовок 2-го уровня -->
			<h2>Красные или зеленые яблоки?</h2>
			
			<!-- Внутренняя навигация по статье -->
			<nav>
				<ul>
					<li><a href="#red_apples">О красных сортах яблок</a></li>
					<li><a href="#green_apples">О зеленых сортах яблок</a></li>
				</ul>
			</nav>
		</header>
		
		<!-- ----------- 1-й раздел статьи ---------- -->
		<section id="red_apples">
			<!-- Задаем собственный заголовок 3-го уровня -->
			<h3>О красных сортах яблок</h3>
			<p>
				Не для кого не секрет, что красные сорта яблок...
			</p>
		</section>
		
		<!-- ---------- 2-й раздел статьи ----------- -->
		<section id="green_apples">
			<!-- Задаем собственный заголовок 3-го уровня -->
			<h3>О зеленых сортах яблок</h3>
			<p>
				Зеленые сорта яблок...
			</p>
		</section>
				
		<!-- ---------- «Подвал» всей статьи ----------------------- -->
		<footer class="site_footer">
			
			<p>
				Дата публикации: <time datetime="2015-05-15 19:00">15 мая</time>
     		</p>
			
			<!-- Информация об авторе -->
			<address>
				Автор: Иванов Иван Иванович<br>
				Тел. +375-444-44-44 (до 23-00)
			</address> 
		</footer>
	</article>
	
	<!-- ... и другие статьи, например, о пирогах с яблоками -->
	
</main>

<!-- ---------- «Подвал» сайта ----------------------- -->
<footer class="site_footer">
	<!-- Информация о владельце -->
	<address>Петр Романовский, Минск, 2016-2099.</address> 
</footer>
	
</body>
</html>

Пример №1