HTML тег <del>
Тег <del> отмечает удалённый текст. Атрибуты cite и datetime, связь с <ins>, доступность и примеры.
Тег <del> обозначает фрагмент текста, который был удалён из документа. Это семантический элемент: он не просто перечёркивает текст, а фиксирует, что содержимое было намеренно убрано в ходе редактирования. Браузеры отображают его с зачёркиванием по умолчанию, однако смысл заложен в разметке, а не в стилях.
Используйте <del>, когда хотите показать историю изменений, например:
- Отслеживание правок — исходный текст остаётся видимым, но помечается как удалённый (журналы изменений, вики, совместные документы).
- Снижение цен — старая цена зачёркивается, рядом указывается новая.
- Исправления — ошибка сохраняется в документе (опубликованная корректура) вместо того, чтобы её тихо удалить.
<del> почти всегда используется в паре с тегом <ins>, который обозначает вставленный текст и подчёркивается по умолчанию. Вместе они выражают формулу «это было заменено тем».
Когда НЕ следует использовать <del>
Если нужен только визуальный эффект зачёркивания без смысла «это было отредактировано», <del> — не подходящий инструмент:
- Для содержимого, которое более не актуально (но не было удалено в процессе редактирования) — например, распроданный товар или истёкшее предложение — используйте тег
<s>. - Для чисто визуального зачёркивания без семантического смысла используйте CSS-свойство text-decoration со значением
line-through.text-decoration: line-throughносит исключительно презентационный характер и игнорируется вспомогательными технологиями, тогда как<del>передаёт смысл им.
Итого: используйте <del>, когда зачёркивание означает «удалено при редактировании», и CSS — когда нужна просто линия.
Элемент <del> можно свободно стилизовать с помощью CSS — например, изменить цвет или убрать стандартное зачёркивание — не теряя семантики, поскольку смысл заложен в теге, а не в стилях.
Доступность
Не все программы чтения с экрана обрабатывают <del> одинаково. По умолчанию NVDA и JAWS обычно читают удалённый текст как обычный, не сообщая об его удалении, если только пользователь не включит соответствующий уровень детализации — зрячий пользователь видит зачёркивание, а пользователь программы чтения с экрана может не узнать об изменении вовсе.
Если само удаление важно для понимания содержимого (например, разница между старой и новой ценой), добавьте явную подсказку, не полагаясь только на визуальную линию:
<p>
Price:
<del><span class="visually-hidden">Old price: </span>$99</del>
<ins><span class="visually-hidden">New price: </span>$79</ins>
</p>Не пытайтесь вставить текст «удалено» через CSS content — сгенерированный контент непоследовательно доступен вспомогательным технологиям. При необходимости добавить контекст предпочтительнее использовать видимый текст, aria-label или aria-describedby на элементе.
Синтаксис
Тег <del> используется парно. Содержимое записывается между открывающим (<del>) и закрывающим (</del>) тегами.
Пример HTML-тега <del>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>My favorite color is <del>green</del> <ins>blue</ins>!</p>
</body>
</html>Реальный пример: снижение цены
Наиболее распространённое применение <del> в паре с <ins> — отображение старой цены рядом с новой:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>Special offer: <del>$99</del> <ins>$79</ins></p>
</body>
</html>Старая цена остаётся на странице (зачёркнутой), а новая помечается как вставленная — визуальный результат и разметка рассказывают одну и ту же историю.
Пример HTML-тега <del> с атрибутом cite
Атрибут cite содержит URL документа, объясняющего причину изменения текста — запись в журнале изменений, diff или ссылку в баг-трекере, но не само удалённое содержимое:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>
The release date is
<del cite="https://example.com/changelog#2023-10-25">October 25</del>
<ins cite="https://example.com/changelog#2023-11-02">November 2</ins>.
</p>
</body>
</html>Пример HTML-тега <del> с атрибутом datetime
Атрибут datetime фиксирует момент удаления в машиночитаемом формате:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>The <del datetime="2023-10-25T14:30:00Z">old text</del> was replaced with new content.</p>
</body>
</html>Формат datetime
Значение datetime следует формату YYYY-MM-DDThh:mm:ssTZD:
YYYY-MM-DD— дата (год, месяц, день). Эта часть обязательна.T— разделитель между датой и временем.hh:mm:ss— время. Временна́я часть целиком необязательна — допустима одна только дата.TZD— обозначение часового пояса:Zдля UTC или смещение вида+02:00/-05:00.
Допустимые значения:
2023-10-25 <!-- date only -->
2023-10-25T14:30 <!-- date + time, no seconds -->
2023-10-25T14:30:00Z <!-- UTC -->
2023-10-25T14:30:00+02:00 <!-- with a time-zone offset -->Недопустимые значения:
25-10-2023 <!-- wrong order; must be YYYY-MM-DD -->
2023/10/25 <!-- wrong separators; must use hyphens -->
2023-10-25 14:30:00 <!-- space instead of the "T" separator -->Атрибуты
| Атрибут | Значение | Описание |
|---|---|---|
| cite | URL | URL документа (журнал изменений, diff, задача), объясняющего причину редактирования или удаления текста. |
| datetime | YYYY-MM-DDThh:mm:ssTZD | Дата (и необязательное время) удаления текста. |
Тег <del> также поддерживает глобальные атрибуты и атрибуты событий.
Связанные теги
<ins>— обозначает вставленный текст; естественный партнёр<del>.<s>— обозначает текст, который более не актуален (но не был удалён при редактировании).