Footer: Тег | htmlbook.ru - Блог сумасшедшего сисадмина

Содержание

— HTML | MDN

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

Категории контента	Основной поток, явный контент.
Допустимое содержимое	Контент основного потока, кроме `<footer>` и `<header>`.
Пропуск тегов	Нет, открывающий и закрывающий теги обязательны.
Допустимые родители	Любой элемент, который разрешает Контент основного потока в качестве содержимого. Обратите внимание, что элемент `<footer>` не должен быть потомком элемента `<address>`, `<header>` или другого элемента `<footer>` .
Допустимые ARIA-роли	`group (en-US)`, `presentation (en-US)`
DOM-интерфейс	`HTMLElement`

К этому элементу применимы только глобальные атрибуты.

Заключите информацию об авторе в элемент <address>, который может быть добавлен в элемент <footer>.
Элемент <footer> не относится к секционному контенту, а значит не создаёт новый раздел в структуре HTML-документа.

<footer>
  Какая-то информация об авторском праве или может информация об авторе статьи?
</footer>

У программа чтения с экрана VoiceOver есть проблема, при которой она не читает элемент <footer> (не добавляет роль-ориентир элемента <footer> в список ориентиров). Чтобы решить эту проблему добавьте role="contentinfo" в элемент <footer>.

WebKit Bugzilla: 146930 — AX: Нативные элементы HTML (header, footer, main, aside, nav) должны работать также, как ориентиры ARIA, но иногда они этого не делают

Specification
HTML Standard # the-footer-element

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Связанные с этим разделом элементы: <body>, <nav>, <article>, <aside>, <h2> (en-US), <h3> (en-US), <h4> (en-US), <h5> (en-US), <h5> (en-US), <h6> (en-US), <hgroup>, <header>, <section>, <address>;
Разделы и структура документа HTML5.
ARIA: роль contentinfo (en-US)

Found a content problem with this page?

Edit the page on GitHub.
Report the content issue.
View the source on GitHub.

Want to get more involved?

Learn how to contribute.

This page was last modified on 4 мар. 2023 г. by MDN contributors.

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: язык гипертекстовой разметки

HTML-элемент

представляет собой нижний колонтитул для своего ближайшего предка, разделяющего содержимое или разделяющего корневой элемент.

обычно содержит информацию об авторе раздела, данные об авторских правах или ссылки на соответствующие документы.

Категории контента	Вытекающее содержимое, пальпируемое содержимое.
Разрешенный контент	Потоковое содержимое, но без или потомков.
Отсутствие тега	Нет, начальный и конечный теги обязательны.
Разрешенные родители	Любой элемент, принимающий потоковое содержание. Обратите внимание, что элемент не должен быть потомок `<адрес>` , `<заголовок>` или другой `<нижний колонтитул>` элемент.
Неявная роль ARIA	информация о содержании или нет соответствующей роли если потомок статья, в стороне, основной, навигация или элемент раздела или элемент с `роль=статья` , дополнительный, основной, навигация или область
Разрешенные роли ARIA	`группа` , `презентация` или `нет`
Интерфейс DOM	`HTMLЭлемент`

Этот элемент включает только глобальные атрибуты.

Информацию об авторе заключить в элемент
, который можно включить в элемент
.
Если ближайший предок, разделяющий содержимое или корневой элемент раздела, является элементом body, нижний колонтитул применяется ко всей странице.
Элемент
не разбивает содержимое на разделы и, следовательно, не вводит новый раздел в схему.

 <тело>
 Лучшие бомбардиры чемпионатов мира по футболу 
<ол>
Мирослав Клозе, 16 лет
Роналду Назарио, 15 лет.
Герд Мюллер, 14 лет.
  
 Авторские права © 2023 Football History Archives. Все права защищены.

 нижний колонтитул {
    выравнивание текста: по центру;
    отступ: 5px;
    цвет фона: #abbaba;
    цвет: #000;
}

До выпуска Safari 13 роль ориентира contentinfo не отображалась должным образом в VoiceOver. Если требуется поддержка устаревших браузеров Safari, добавьте role="contentinfo" к элементу нижнего колонтитула , чтобы обеспечить правильное отображение ориентира.

Связано: WebKit Bugzilla: 146930 — AX: собственные элементы HTML (заголовок, нижний колонтитул, основной, боковой, навигация) должны работать так же, как ориентиры ARIA, иногда они не работают

Спецификация
Стандарт HTML # the-footer-element

Загрузка таблиц браузера разрешена только в BCD. Включите JavaScript для просмотра данных.

Другие элементы, относящиеся к разделу: ,
,
,
, h2, h3, h4, h5, h5, h6, 9000 , <заголовок> , <раздел> , <адрес> ;
Использование разделов и структур HTML
ARIA: роль Contentinfo

`Обнаружили проблему с содержанием этой страницы?`

Отредактируйте страницу на GitHub.
Сообщить о проблеме с содержимым.
Посмотреть исходный код на GitHub.

Хотите принять участие?

Узнайте, как внести свой вклад.

Последнее изменение этой страницы: 22 марта 2023 г. от участников MDN.

`Определение и значение нижнего колонтитула — Merriam-Webster`

1 из 2

нижний колонтитул ˈfu̇-tər

1

архаичный : пешеход

2

: информация (например, номер страницы), напечатанная внизу каждой страницы документа 2 из 2

: тот, который имеет определенное количество футов в высоту, длину или ширину

шесть -нижний колонтитул

`История слов`

Первое известное употребление

Существительное

15 век в значении, определенном в смысле 1

Путешественник во времени

Первое известное использование нижнего колонтитула было в 15 веке

Другие слова того же века

`Словарные статьи Рядом с`

 нижний колонтитул  футейт
 нижний колонтитул
 -нижний колонтитул
 Посмотреть другие записи поблизости
 Процитировать эту запись
 «Нижний колонтитул».
  Словарь Merriam-Webster.com  , Merriam-Webster, https://www.merriam-webster.com/dictionary/footer. По состоянию на 26 марта 2023 г.
 Copy Citation
 Подпишитесь на крупнейший словарь Америки и получите тысячи дополнительных определений и расширенный поиск без рекламы!
 Merriam-Webster без сокращений
 кавалькада 
 См. Определения и примеры »
 Получайте ежедневно по электронной почте Слово дня!
 Сложные стандартизированные тестовые слова, Vol. 2
 Новая компьютерная система предприятия не оказалась  панацеей  .
 Безопасное пространство
 Препятствие
 Панацея
 Дорогостоящее бремя
 Проверьте свой словарный запас с помощью нашей викторины из 10 вопросов!
 ПРОЙДИТЕ ТЕСТ
 Сможете ли вы составить 12 слов из 7 букв?
 ИГРАТЬ
 Спросите у редакторов
 Странные множественные числа
 Один гусь, два гуся. Один лось, два... лось. Чт...
 независимо
 На самом деле это настоящее слово (но это не значит...
 Принести или взять
 Оба слова означают движение, но разница может быть...
 Дефенестрация
 Увлекательная история любимых многими людей...
 Игра слов
 Назови этот цветок
 Сможете ли вы отличить сирень от...
 Пройти тест
 Вы чувствуете себя счастливым?
 Очаровательная викторина о счастливчиках и неудачниках.
No related posts.

Footer: Тег | htmlbook.ru