Атрибут data-* тега <footer>
Описание
Атрибуты data-* позволяют хранить дополнительную информацию в стандартных HTML-элементах, включая <footer>. Эти атрибуты не влияют на отображение, но могут быть использованы JavaScript или CSS для создания более интерактивных страниц.
<footer data-page="contact" data-version="1.2" data-author="web-team">
© 2025 Мой Сайт | Все права защищены
</footer>
Особенности синтаксиса:
| Правило | Пример |
|---|---|
Должен начинаться с data- |
data-info |
| Может содержать дефисы | data-user-id |
| Значение может быть любой строкой | data-active="true" |
Доступ из JavaScript:
<footer id="site-footer" data-page="home" data-visits="42">
Добро пожаловать на главную страницу
</footer>
<script>
const footer = document.getElementById('site-footer');
// Чтение данных
console.log(footer.dataset.page); // "home"
console.log(footer.dataset.visits); // "42"
// Изменение данных
footer.dataset.visits = '43';
footer.dataset.lastVisit = new Date().toLocaleDateString();
</script>
Использование в CSS:
<style>
footer[data-theme="dark"] {
background-color: #333;
color: white;
}
footer[data-theme="light"] {
background-color: #f5f5f5;
color: #333;
}
footer[data-highlight="true"] {
border-top: 3px solid #4CAF50;
}
</style>
<footer data-theme="dark" data-highlight="true">
Темный стиль с выделением
</footer>
Практическое применение для футера:
<footer
data-template="v2"
data-copyright-year="2025"
data-show-counter="true"
>
<div id="copyright">© <span>2025</span> Компания</div>
<div id="counter" style="display:none;">Посетителей сегодня: 0</div>
</footer>
<script>
// Обновляем год в копирайте
document.querySelector('#copyright span').textContent =
document.querySelector('footer').dataset.copyrightYear;
// Показываем счетчик если нужно
if (document.querySelector('footer').dataset.showCounter === 'true') {
document.getElementById('counter').style.display = 'block';
// Здесь мог бы быть код для получения реального счетчика
}
</script>
Рекомендации по использованию:
- Используйте для хранения информации, связанной с элементом
- Храните простые данные (для сложных структур лучше использовать JSON)
- Придумывайте осмысленные имена атрибутов
- Не используйте для информации, которая должна быть видна пользователю
Преимущества:
- Не конфликтуют со стандартными атрибутами
- Поддерживаются всеми современными браузерами
- Позволяют хранить данные прямо в HTML
- Могут использоваться для настройки CSS
Примечание: Атрибуты data-* особенно полезны для футера, когда нужно хранить мета-информацию о версии шаблона, авторах, или настройках отображения. Они помогают создать более гибкую и настраиваемую структуру без изменения классов или ID элементов.