HTML-тег <footer>

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

Тег <footer> можно использовать в нижней части <body> для создания нижнего колонтитула на всю страницу или в конце других элементов, таких как <article> или <section> , для создания нижних колонтитулов для отдельных разделов.

Базовый синтаксис HTML-тега <footer>

Базовая структура тега <footer> следующая: 

<footer>
    Footer content goes here.
</footer>

Содержимое тега <footer> должно предоставлять полезную информацию о разделе, к которому он принадлежит.

Атрибуты HTML-тега <footer>

  • Глобальные атрибуты: тег <footer> поддерживает все глобальные атрибуты, такие как id , class , style и data-* .
  • Атрибуты событий: Тег <footer> поддерживает такие атрибуты событий, как onclick , onmouseover и onkeydown .

Базовый пример HTML-тега <footer>

Вот простой пример нижнего колонтитула на всю страницу: 

<!DOCTYPE html>
<html>
    <body>
        <h1>Welcome to My Website</h1>
        <p>This is the main content of the page.</p>

        <footer>
            <p>© 2024 My Website. All rights reserved.</p>
            <nav>
                <a href="/privacy-policy">Privacy Policy</a> | 
                <a href="/terms-of-service">Terms of Service</a>
            </nav>
        </footer>
    </body>
</html>
Базовый пример HTML-футера Тег

Пояснение: <footer> содержит информацию об авторских правах и навигационные ссылки, отображаемые внизу страницы.

Использование тега <footer> со статьями

Тег <footer> также можно использовать внутри других элементов, таких как <article> для определения нижних колонтитулов, специфичных для этих разделов: 

<!DOCTYPE html>
<html>
    <body>
        <article>
            <h2>Understanding the HTML footer Tag</h2>
            <p>The footer tag is a semantic element used to define footer sections in a web page.</p>
            <footer>
                <p>Written by John Doe | Published on December 10, 2024</p>
            </footer>
        </article>
    </body>
</html>
Использование нижнего колонтитула Тег со статьями

Пояснение: В этом примере используется <footer> для включения информации об авторе и публикации в конец статьи.

Стилизация тега <footer> с помощью CSS

Вы можете стилизовать тег <footer> с помощью CSS в соответствии с дизайном вашего сайта: 

<!DOCTYPE html>
<html>
    <head>
        <style>
            body {
              margin: 0;
            }
            footer {
                background-color: #333;
                color: white;
                text-align: center;
                padding: 20px;
                font-size: 14px;
                position: fixed;
                bottom: 0;
                width: 100%;
            }

            footer a {
                color: #00bfff;
                text-decoration: none;
                margin: 0 5px;
            }

            footer a:hover {
                text-decoration: underline;
            }
        </style>
    </head>
    <body>
        <h1>Welcome to My Website</h1>
        <p>This is the main content of the page.</p>

        <footer>
            <p>© 2024 My Website. All rights reserved.</p>
            <nav>
                <a href="/privacy-policy">Privacy Policy</a> | 
                <a href="/terms-of-service">Terms of Service</a>
            </nav>
        </footer>
    </body>
</html>
Оформление нижнего колонтитула Тег с помощью CSS

Результат: нижний колонтитул имеет темный фон, белый текст и фиксированное позиционирование в нижней части области просмотра, что гарантирует его видимость при прокрутке страницы пользователем.

Практическое применение тега <footer>

  • Нижний колонтитул на всю страницу: включите в нижнюю часть страницы глобальную информацию, например сведения об авторских правах, ссылки на социальные сети и навигационные меню.
  • Нижние колонтитулы, специфичные для раздела: используются в элементах <article> или <section> для локализованных метаданных или дополнительной информации.
  • Липкий нижний колонтитул: создайте нижний колонтитул, который останется фиксированным внизу экрана независимо от прокрутки.