Атрибут id тега <figcaption>
Описание
Атрибут id в теге <figcaption> задаёт уникальный идентификатор для подписи изображения или медиа-контента. Этот идентификатор позволяет:
- Точечно стилизовать подпись через CSS
- Обращаться к элементу через JavaScript
- Создавать якорные ссылки внутри страницы
- Связывать с элементами форм через
<label>
<figure>
<img src="chart.png" alt="График продаж">
<figcaption id="sales-chart-caption">
Рисунок 1. Динамика продаж по месяцам
</figcaption>
</figure>
Основные сценарии применения:
| Технология | Пример использования | Назначение |
|---|---|---|
| CSS | #sales-chart-caption { font-style: italic; } |
Уникальное оформление подписи |
| JavaScript | document.getElementById('sales-chart-caption') |
Программное управление подписью |
| Якорные ссылки | <a href="#sales-chart-caption">К графику</a> |
Быстрая навигация к подписи |
Правила именования:
- Должен начинаться с буквы (A-Z, a-z)
- Может содержать цифры, дефисы и подчёркивания
- Должен быть уникальным в пределах документа
- Чувствителен к регистру
- Не должен содержать пробелы
Пример комплексного использования:
<style>
#important-caption {
color: #d32f2f;
border-left: 3px solid currentColor;
padding-left: 10px;
}
</style>
<figure>
<img src="warning.png" alt="Предупреждение">
<figcaption id="important-caption">
Важно: данные за последнюю неделю могут быть неполными
</figcaption>
</figure>
<script>
const caption = document.getElementById('important-caption');
caption.addEventListener('click', () => {
alert('Подпись была кликнута!');
});
</script>
Важные особенности:
- Имеет наивысший приоритет в CSS-каскаде (после !important)
- Доступен как глобальная переменная в браузерах
- Может использоваться в querySelector (#id)
- Для динамических элементов нужно гарантировать уникальность
Ограничения:
- Нельзя использовать несколько id для одного элемента
- Не рекомендуется использовать кириллицу
- Некоторые символы (пробелы, точки) запрещены
- Повторное использование id на странице недопустимо
Примечание: Хотя id является мощным инструментом, для стилизации подписей чаще рекомендуется использовать классы, чтобы сохранить возможность повторного использования стилей. Идентификаторы лучше применять для уникальных элементов и JavaScript-взаимодействия.