Атрибут id тега <del>
Описание
Атрибут id задаёт уникальный идентификатор для элемента <del>, который может использоваться для:
- Стилизации через CSS
- Обращения к элементу через JavaScript
- Создания якорей для навигации
- Связи с другими элементами документа
<p>
Изменённая цена:
<del id="old-price" datetime="2025-11-01">$199.99</del>
<ins>$149.99</ins>
</p>
<a href="#old-price">Ссылка на удалённую цену</a>
Особенности работы:
| Характеристика | Описание |
|---|---|
| Уникальность | Должен быть единственным в пределах документа |
| Синтаксис | Должен начинаться с буквы (A-Z, a-z) |
| Чувствительность | К регистру (myId ≠ myid) |
| CSS-специфичность | Высокий приоритет (1,0,0,0) |
Практическое применение:
<style>
#special-deletion {
background-color: #fff0f0;
padding: 2px 5px;
border-left: 3px solid red;
}
</style>
<article>
<p>
<del id="special-deletion" datetime="2025-11-15" cite="#changelog">
Устаревшая информация о продукте
</del>
</p>
<button onclick="highlightDeletion()">Выделить удаление</button>
</article>
<script>
function highlightDeletion() {
const del = document.getElementById('special-deletion');
del.style.backgroundColor = '#ffebee';
del.style.fontWeight = 'bold';
}
</script>
Рекомендации по использованию:
- Используйте осмысленные имена, отражающие назначение
- Избегайте общих имён вроде "deleted" или "removed"
- Для стилизации предпочтительнее использовать классы
- Сохраняйте уникальность идентификаторов в документе
- Для динамически создаваемых элементов генерируйте уникальные ID
Пример с якорными ссылками:
<article>
<h2>История изменений документа</h2>
<nav>
<a href="#change-1">Изменение от 01.11</a> |
<a href="#change-2">Изменение от 15.11</a>
</nav>
<p>
<del id="change-1" datetime="2025-11-01">
Первоначальная версия требования
</del>
</p>
<p>
<del id="change-2" datetime="2025-11-15">
Вторая версия требования
</del>
</p>
</article>
Важные замечания:
- Не используйте ID для хранения данных - для этого есть
data-* - Избегайте кириллических и специальных символов в именах
- Для групповых операций удобнее использовать классы
- Проверяйте уникальность ID при динамическом добавлении контента
Примечание: Хотя атрибут id очень полезен для работы с конкретными удалёнными фрагментами текста, его следует использовать умеренно. Для стилизации предпочтительнее классы, а для хранения метаданных - data-* атрибуты.