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
Примеры
<!-- Указываем тип документа --> <!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