Тег del (от английского deleted, «удалённый») показывает читателю, что фрагмент убрали из документа: старую дату, прежнюю цену, лишний шаг инструкции. Браузер зачёркивает такой текст по умолчанию. Тег парный, закрывающий обязателен, а необязательные атрибуты cite и datetime записывают причину и время правки.
Зачёркивание видно только глазами: в копию, поиск и чтение с экрана попадает сам текст, поэтому удалённое значение нельзя считать исчезнувшим. Если рядом с ним стоит новое, читатель, скопировавший строку, получит обе версии. Пара для такой правки - ins, а для устаревшего, но не удалённого текста подходит s.
<p>Вебинар пройдёт <del>12 октября</del>.</p>В этой статье
Что такое тег del и для чего он нужен
Спецификация HTML описывает del как удаление из документа. Содержимое тега прозрачное, как у ins: внутри абзаца это текст и строчные теги, внутри блока - блочные.
Для чего нужен del: показать, что именно убрали. Так отмечают перенесённую дату, прежнюю цену, удалённый пункт в инструкции, снятое требование в журнале изменений. Обычно рядом записывают парный ins с новым значением. Эта пара разобрана в уроке курса про del и ins.
В браузере del - строчный элемент (display: inline) с зачёркиванием: в замере text-decoration-line равен line-through, линия сплошная, её цвет совпадает с цветом текста, а вес и начертание не меняются. Выделение и копирование дают только текст без пометок.
С блоками del ведёт себя так же, как ins. Запись <del><p>Абзац</p></del> допустима, но один del через несколько абзацев стандарт не советует: каждый абзац отмечают отдельным del. Абзац внутри p браузер не принимает: в замере <p>a<del><p>b</p></del></p> превратилось в <p>a<del></del></p><p>b</p><p></p>. Записывайте del внутри li и внутри ячейки td: запись <del> между table и tr браузер выносит перед таблицей, а вокруг li оставляет, но валидатор её отметит.
Тег del вместе с ins: пара для правки, cite и datetime
Когда текст заменили, читателю полезно видеть обе версии: прежнюю в del и новую в ins. Пара читается без пояснений, а история правки остаётся на странице. Между тегами нужен пробел, иначе слова слипнутся.
Обратите внимание на копирование. Зачёркивание в копию не попадает, а текст попадает: скопированная строка содержит обе даты подряд. Если текст с правкой берут для письма или заметки, зачёркнутое придётся убрать вручную. Проверьте три записи в кадре.
Пример: del, ins и копирование
Выберите запись. Кадр показывает разметку и текст, который попадёт в копию.
Атрибуты те же, что у ins. Атрибут cite хранит адрес страницы с пояснением, а datetime - время правки в формате тега time: дата 2026-09-25 или дата со временем 2026-09-25T10:30. Читателю атрибуты не видны. Браузер их не проверяет: в замере свойство dateTime вернуло записанную строку как есть.
<del datetime="2026-09-25" cite="/log">12 октября</del>
<ins datetime="2026-09-25" cite="/log">19 октября</ins>Чем тег del отличается от s: правка и неактуальное
По умолчанию del и s выглядят одинаково: в замере оба получили сплошное зачёркивание цветом текста. Разница в смысле. Тег del говорит, что фрагмент убрали из документа, и несёт атрибуты cite и datetime. Тег s отмечает то, что перестало быть верным, но остаётся на странице как есть.
| Признак | del | s | span с зачёркиванием |
|---|---|---|---|
| Смысл | Удалено из документа | Уже неактуально | Только вид |
cite и datetime | Есть | Нет | Нет |
| Парный тег | ins с новым значением | Нет | Нет |
| Пример | Дата вебинара до переноса | Условие акции, которое закончилось | Оформление без смысла |
Простое правило: если у текста была правка и вы хотите показать её, берите del. Если текст просто перестал действовать и вы не редактируете документ, берите s. Строка «Места закончились» с зачёркнутой прежней ценой - случай для s: цену никто не удалял, она устарела.
Оформление тега del в CSS: цвет и толщина линии
Вид удалённого текста меняют свойствами text-decoration-color (цвет линии), text-decoration-thickness (толщина линии) и color (цвет самого текста). Приглушённый текст с яркой линией отделяет удалённое от нового: рядом с обычным ins сразу видно, что прочитать нужно второе.
del {
color: #7A8090;
text-decoration-color: #E5484D;
text-decoration-thickness: 2px;
}Не убирайте линию совсем: без неё del перестаёт отличаться от обычного текста, и читатель видит два значения подряд без пояснения. Если нужна дополнительная метка, добавьте её через ::before или ::after: такой текст виден на экране, но в копию не попадает.
Пример: оформление del
Выберите оформление. Кадр показывает применённые свойства и цвет текста внутри del.
Тег del и ins в скрипте: как принять или отклонить правки
Пара del и ins удобна для скрипта: по тегам легко найти всё, что убрали и что добавили. Чтобы принять правки, удаляют все del и снимают обёртку с ins, оставляя его текст. Чтобы отклонить, делают наоборот.
const doc = document.querySelector('article').cloneNode(true);
doc.querySelectorAll('del').forEach((e) => e.remove());
doc.querySelectorAll('ins').forEach((e) => {
e.replaceWith(...e.childNodes);
});Скрипт работает с копией cloneNode(true), поэтому страница не меняется. Проверьте результат в кадре. В замере после принятия правок текст «Вебинар 19 октября в 19:00.» получился правильным, а после отклонения перед точкой появился лишний пробел: пробел между del и ins никуда не делся. После снятия обёрток пробелы стоит чистить.
Пример: принять или отклонить правки
Выберите действие. Кадр показывает разметку и текст после правки.
Частые ошибки с тегом del
Ошибки с этим тегом связаны с выбором вместо s, с копированием и с вложенностью.
| Ошибка | Что происходит | Как исправить |
|---|---|---|
del для устаревшего: <del>1 290</del> у прежней цены | Тег говорит, что значение удалили, хотя оно просто устарело | Взять s |
del ради вида | Тег сообщает об удалении, которого не было | Оформить через CSS text-decoration или span |
del без ins, когда текст заменили | Читатель не видит, чем заменили удалённое | Записать пару: del и рядом ins |
| Ожидание, что зачёркнутое не копируется | Зачёркнутый текст попадает в копию вместе с новым | Убрать del скриптом, если копия нужна чистой |
Один del через несколько абзацев | Стандарт не советует пересекать границы абзацев | Отмечать каждый абзац своим del |
del вокруг li или между table и tr | Валидатор отмечает ошибку, в таблице браузер выносит тег | Записать del внутри li или ячейки |
Неверный формат: datetime="вчера" | Браузер значение принимает, а программа, читающая дату, его не поймёт | Записать дату: 2026-09-25 или со временем |
