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

Описание

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

  • Ссылаться на конкретное выделение из JavaScript или CSS
  • Создавать якорные ссылки внутри документа
  • Программно управлять выделенными фрагментами
Пример использования:
<p> В этом абзаце <mark id="main-highlight">ключевая мысль</mark> выделена и имеет уникальный идентификатор. </p> <button onclick="highlightTerm()">Подсветить</button> <style> #main-highlight { background-color: #fff176; padding: 2px 4px; border-radius: 3px; } </style> <script> function highlightTerm() { const mark = document.getElementById('main-highlight'); mark.style.backgroundColor = '#ffeb3b'; mark.style.fontWeight = 'bold'; } </script>

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

Применение Результат
Уникальный идентификатор Позволяет точно адресовать элемент
Якорная ссылка Можно ссылаться через #id в URL
Глобальная переменная В браузере элемент доступен по ID как глобальная переменная

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

<article> <p>...длинный текст...</p> <mark id="important-note">Важное примечание!</mark> <p>...продолжение текста...</p> </article> <a href="#important-note">Перейти к примечанию</a>

Рекомендации по использованию:

  • Используйте осмысленные имена ID (например, definition-1)
  • Обеспечьте уникальность ID в пределах документа
  • Избегайте кириллических и сложных символов в идентификаторах
  • Для динамически создаваемых элементов генерируйте уникальные ID

Ограничения и совместимость:

  • ID должен начинаться с буквы (не с цифры)
  • Не используйте пробелы и специальные символы (кроме дефиса и подчёркивания)
  • В одном документе не должно быть элементов с одинаковыми ID

Примечание: Хотя атрибут id является универсальным для всех HTML-элементов, его использование с тегом <mark> особенно полезно для образовательных приложений, систем комментирования и интерактивных документов, где требуется программный доступ к конкретным выделенным фрагментам.