Атрибут id тега <blockquote>

Описание

Атрибут id для тега <blockquote> позволяет назначить уникальный идентификатор цитате. Это полезно для:

  • Точного обращения к цитате через JavaScript/CSS
  • Создания якорных ссылок на конкретные цитаты
  • Интеграции с системами аналитики и тестирования
  • Связки с элементами форм через aria-labelledby

Пример использования:

<blockquote id="einstein-quote" cite="https://example.com/einstein"> <p>Воображение важнее знания.</p> <footer>— Альберт Эйнштейн</footer> </blockquote>

Практическое применение:

Сценарий Пример
CSS-стилизация #einstein-quote { border-color: #2a5db0; }
JavaScript-доступ document.getElementById('einstein-quote')
Якорная ссылка <a href="#einstein-quote">Ссылка на цитату</a>
ARIA-ассоциации aria-labelledby="einstein-quote"

Особенности работы:

  • Должен быть уникальным в пределах документа
  • Чувствителен к регистру (рекомендуется lowercase)
  • Доступен как глобальная переменная в нестрогом режиме
  • Не должен содержать пробелы или специальные символы

Важно: Не изменяйте значение id динамически после загрузки страницы - это может нарушить существующие ссылки на элемент.

Пример комплексного использования:

<article aria-labelledby="quote-heading"> <h2 id="quote-heading">Избранные цитаты</h2> <blockquote id="main-quote" class="featured"> <p>Цитата дня</p> <footer><cite>Автор</cite></footer> </blockquote> </article> <a href="#main-quote" class="skip-link">Перейти к цитате</a> <script> // JavaScript-пример const quote = document.getElementById('main-quote'); quote.style.borderLeft = '4px solid #d63384'; </script>

Рекомендации:

  • Используйте осмысленные идентификаторы (quote-tolstoy вместо q1)
  • Избегайте стилизации напрямую по ID - используйте классы
  • Для массовых элементов применяйте data-* атрибуты
  • Сочетайте с атрибутом cite для ссылки на источник