Атрибут id тега <footer>
Описание
Атрибут id задаёт уникальный идентификатор для элемента <footer>. Этот идентификатор может использоваться для стилизации, обращения через JavaScript или создания якорей для навигации.
<footer id="main-footer">
<p>© 2023 Мой Сайт. Все права защищены.</p>
</footer>
Основные правила:
| Правило | Пример | Неправильно |
|---|---|---|
| Должен быть уникальным | id="page-footer" |
id="footer" (если есть другие футеры) |
| Не должен содержать пробелов | id="site_footer" |
id="site footer" |
| Чувствителен к регистру | id="MainFooter" ≠ id="mainfooter" |
- |
Использование в CSS:
<style>
#main-footer {
background-color: #333;
color: white;
padding: 20px 0;
text-align: center;
}
#main-footer p {
margin: 0;
font-size: 14px;
}
</style>
<footer id="main-footer">
<p>Специальное оформление для главного футера</p>
</footer>
Использование в JavaScript:
<footer id="interactive-footer">
Нажмите кнопку чтобы изменить этот текст
</footer>
<button onclick="changeFooter()">Изменить футер</button>
<script>
function changeFooter() {
document.getElementById('interactive-footer').innerHTML =
'<p>Текст изменен ' + new Date().toLocaleTimeString() + '</p>';
}
</script>
Создание якорей:
<a href="#footer-content">Перейти к футеру</a>
<!-- Другой контент страницы -->
<footer id="footer-content">
<h3>Контакты</h3>
<p>Email: info@example.com</p>
</footer>
Рекомендации по именованию:
- Используйте осмысленные имена (
main-footer,contact-footer) - Избегайте общих имен (
footer1,element123) - Придерживайтесь единого стиля (kebab-case или camelCase)
- Учитывайте структуру проекта при создании имен
Особенности работы:
- Элемент с id доступен как глобальная переменная в JavaScript (не рекомендуется использовать)
- Повторяющиеся id могут вызвать проблемы в работе скриптов
- Имеет высший приоритет в CSS (наряду с !important)
- Поддерживается всеми браузерами без исключений
Примечание: Хотя id предоставляет удобный способ обращения к элементам, для стилизации предпочтительнее использовать классы, оставляя id для JavaScript-логики и якорей. Для футера особенно важно выбирать уникальные имена, так как на одной странице может быть несколько footer-элементов.