Атрибут id тега <figure>
Описание
Атрибут id в теге <figure> задаёт уникальный идентификатор для контейнера с изображением и подписью. Этот идентификатор позволяет:
- Точечно стилизовать элемент через CSS
- Обращаться к контейнеру через JavaScript
- Создавать якорные ссылки для навигации
- Связывать с другими элементами страницы
<figure id="main-chart">
<img src="sales.png" alt="График продаж">
<figcaption>Рисунок 1. Основные показатели</figcaption>
</figure>
Основные сценарии применения:
| Технология | Пример использования | Назначение |
|---|---|---|
| CSS | #main-chart { border: 1px solid #ddd; } |
Уникальное оформление контейнера |
| JavaScript | document.getElementById('main-chart') |
Программное управление элементом |
| Навигация | <a href="#main-chart">К графику</a> |
Быстрый переход к изображению |
Правила именования:
- Должен начинаться с буквы (A-Z, a-z)
- Может содержать цифры, дефисы и подчёркивания
- Должен быть уникальным в пределах документа
- Чувствителен к регистру
- Не должен содержать пробелы
Пример комплексного использования:
<style>
#featured-image {
max-width: 800px;
margin: 20px auto;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
</style>
<figure id="featured-image">
<img src="product.jpg" alt="Наш продукт">
<figcaption>Фото 1. Флагманский продукт 2023 года</figcaption>
</figure>
<script>
const figure = document.getElementById('featured-image');
figure.addEventListener('click', () => {
alert('Вы кликнули на главное изображение!');
});
</script>
Важные особенности:
- Имеет наивысший приоритет в CSS-каскаде (после !important)
- Доступен как глобальная переменная в браузерах
- Может использоваться в querySelector (#id)
- Для динамических элементов нужно гарантировать уникальность
Ограничения:
- Нельзя использовать несколько id для одного элемента
- Не рекомендуется использовать кириллицу
- Некоторые символы (пробелы, точки) запрещены
- Повторное использование id на странице недопустимо
Примечание: Хотя id является мощным инструментом, для стилизации рекомендуется использовать классы, чтобы сохранить возможность повторного использования стилей. Идентификаторы лучше применять для уникальных элементов и JavaScript-взаимодействия.