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

Описание

Атрибут id задаёт уникальный идентификатор для элемента <summary>. Этот идентификатор может использоваться для:

  • Связи с CSS и JavaScript
  • Якорных ссылок внутри страницы
  • Семантической идентификации элемента
Пример использования:
<details> <summary id="main-summary">Основная секция</summary> <p>Контент раскрывающегося блока...</p> </details> <a href="#main-summary">Перейти к секции</a>

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

  • Должен быть уникальным в пределах документа
  • Чувствителен к регистру
  • Может содержать буквы, цифры, дефисы и подчёркивания
  • Не должен начинаться с цифры

Пример с CSS и JavaScript:

<style> #special-summary { color: #e74c3c; font-weight: bold; } </style> <details> <summary id="special-summary">Специальный заголовок</summary> <p>Этот блок имеет особое оформление</p> </details> <script> document.getElementById('special-summary').addEventListener('click', function() { console.log('Заголовок был нажат!'); }); </script>

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

  • Используйте осмысленные имена (не "id1", "id2" и т.д.)
  • Придерживайтесь единого стиля именования (kebab-case рекомендуется)
  • Избегайте использования id только для стилизации
  • Для повторяющихся элементов используйте классы вместо id

Ограничения:

  • Дублирование id может привести к неожиданному поведению
  • Слишком общие имена (вроде "header", "content") могут конфликтовать
  • Изменение id динамически может сломать существующие ссылки

Пример с якорной ссылкой:

<details id="faq-section"> <summary id="faq-summary">Часто задаваемые вопросы</summary> <p>Ответы на популярные вопросы...</p> </details> <!-- Ссылка из другого места страницы --> <a href="#faq-summary">Перейти к FAQ</a>

Примечание: Хотя технически можно использовать id для стилизации, рекомендуется применять классы для этих целей, оставляя id для якорных ссылок и JavaScript.