Тег del в HTML - подробное руководство по использованию

Введение

Тег del в HTML используют, чтобы показать удалённый или устаревший текст в содержимом страницы. Визуально браузеры обычно отображают такой текст зачёркнутым. Но главная его задача не в оформлении, а в передаче смысла – этот фрагмент больше не актуален или был заменён.

Смотрите, я покажу вам, как этот тег помогает:

• фиксировать изменения в документах;
• делать интерфейсы понятнее для пользователей;
• улучшать доступность и семантику;
• отделять "удалённый" контент от просто стилизованного.

Давайте разберёмся, как правильно использовать тег del, какие атрибуты он поддерживает, чем отличается от s и как комбинируется с другими элементами, например ins.

Назначение и семантика тега del

Что делает тег del

Тег del (от слова deleted) обозначает фрагмент текста, который был удалён из документа. При этом сам текст остаётся в HTML-коде, но помечается как "исключённый" из актуальной версии.

Ключевая идея: вы показываете пользователю, что раньше этот фрагмент был частью документа, но теперь он больше не действует. Это может быть:

• старая цена;
• устаревшее условие;
• отменённый пункт договора;
• отклонённая версия текста (история изменений).

Браузер, как правило, отрисовывает del с зачёркиванием, но визуальный стиль можно изменить через CSS. Главное, что смысл остаётся – это удалённый контент.

Пример базового использования

Теперь вы увидите, как это выглядит в коде.

<p>
  Старая цена:
  <del>1999 ₽</del>
  Новая цена: 1499 ₽
</p>

del {
  color: #888;        /* Делает удалённый текст менее заметным */
  text-decoration: line-through;  /* Явное зачеркивание, на случай нестандартного браузера */
}

// В этом примере мы: // 1. Используем , чтобы показать устаревшую цену // 2. Стилизуем тег del, чтобы визуально подчеркнуть изменение

Как видите, тег помогает сразу понять, что цена была изменена, а не просто случайно зачёркнута.

Когда стоит использовать del

Давайте посмотрим, в каких ситуациях del уместен:

• Документы с историей правок:
  • техническая документация;
  • юридические тексты;
  • регламенты и правила.
• Интерфейсы с изменяемыми условиями:
  • скидки и акции;
  • изменения в тарифах;
  • обновления функционала.
• Страницы с "логом" изменений:
  • changelog;
  • release notes;
  • сравнение версий текста.

Важно: если вы просто хотите визуально зачеркнуть текст "для красоты", но не несёте смысл "удалено", лучше использовать CSS с text-decoration, а не тег del. Тег нужен именно для семантики.

Синтаксис и базовая структура

Минимальный синтаксис

Тег del парный, содержит внутри текст или другие элементы:

<del>Удалённый текст</del>

// Это базовый пример - без атрибутов и вложенных элементов

Внутрь del можно помещать:

• обычный текст;
• встроенные элементы (span, a, strong, em и т.д.);
• некоторые блочные элементы (в зависимости от контекста).

HTML-стандарт подразумевает, что del — "фразовый" или "потоковый" элемент (flow / phrasing), и может использоваться как в тексте абзаца, так и в других блоках, если это не нарушает структуру документа.

Пример с вложенными элементами

Покажу вам, как это реализовано на практике.

<p>
  Ранее действовало правило
  <del>
    <strong>обязательной</strong> регистрации
    для всех пользователей.
  </del>
  Теперь регистрация не требуется.
</p>

// Внутри мы: // 1. Используем , чтобы показать важность старого правила // 2. Сохраняем структуру текста, но отмечаем его как устаревший

Здесь браузер зачеркнёт весь фрагмент, включая жирное выделение. Это помогает не терять форматирование старой версии текста.

Допустимое вложение

Давайте уточним важный момент. Тег del:

• можно вкладывать внутрь других тегов (p, li, span и т.п.);
• можно использовать как обёртку вокруг нескольких элементов;
• не стоит использовать для обёртки больших структур документа (целых секций, если это ломает семантику).

Пример "большого" применения:

<article>
  <h2>Правила акции</h2>
  <del>
    <p>Акция действовала до 31 декабря 2023 года.</p>
    <p>Скидка предоставлялась только новым клиентам.</p>
  </del>
  <p>Внимание - акция завершена. Условия больше не действуют.</p>
</article>

// Здесь мы: // 1. Оборачиваем два абзаца в , показывая что весь блок устарел // 2. Добавляем новый абзац с актуальной информацией

Такое использование допустимо, если вам нужно ясно зафиксировать, какие параграфы перестали быть актуальными.

Атрибуты тега del

Тег del поддерживает два специфических атрибута: cite и datetime. Они помогают явно описать, кто и когда внёс изменение.

Кроме них, del может иметь и глобальные атрибуты HTML (class, id, style, data-* и т.д.), как и большинство других элементов.

Атрибут datetime

Атрибут datetime фиксирует дату и время удаления содержимого. Он не обязателен, но полезен, если вам важно отслеживать историю изменений.

Формат значения — дата и время в стандарте ISO 8601.

Пример:

<p>
  <del datetime="2024-05-10T14:30:00Z">
    Бонусные баллы сгорают в конце месяца.
  </del>
  Условия программы лояльности обновлены.
</p>

// В этом примере: // 1. datetime указывает точный момент удаления текста // 2. Суффикс Z значит что время указано в UTC // 3. Эта информация доступна в DOM и может использоваться скриптами

Форматы, которые обычно применяют:

• только дата: 2024-05-10
• дата и время (без часового пояса): 2024-05-10T14:30
• дата и время с часовым поясом: 2024-05-10T14:30:00+03:00
• UTC-время: 2024-05-10T14:30:00Z

Если вы строите систему версионирования или журнал изменений, datetime особенно полезен.

Атрибут cite

Атрибут cite указывает URL ресурса, где объясняется причина изменения или есть ссылка на решение, по которому текст был удалён.

Давайте посмотрим на пример.

<p>
  <del
    datetime="2024-05-10T14:30:00+03:00"
    cite="https://example.com/decisions/discount-policy"
  >
    Скидка 10 % действует на все заказы.
  </del>
  Скидка распространяется только на заказы от 3000 ₽.
</p>

// Что здесь происходит: // 1. datetime - когда было принято изменение // 2. cite - ссылка на документ с обоснованием решения // 3. Новый текст сообщает актуальные условия

Атрибут cite не влияет на визуальное отображение, но:

• полезен при работе с автоматическими системами аудита;
• помогает другим разработчикам;
• даёт дополнительную информацию для скриптов (подсказки, всплывающие окна и т.п.).

Использование совместно с глобальными атрибутами

Вы можете комбинировать del с class, data-* и т.д.

<p>
  <del
    class="old-price"
    datetime="2024-03-01"
    data-reason="seasonal_sale"
  >
    2990 ₽
  </del>
  <span class="new-price">1990 ₽</span>
</p>

// В этом коде: // 1. class="old-price" позволяет отдельно стилизовать старые цены // 2. data-reason хранит "техническую" причину изменения // 3. datetime показывает дату начала акции

Такой подход удобен, если вы планируете обрабатывать эти данные на стороне клиента или сервера.

del против s и других способов зачёркивания

В чём разница между del и s

Тег s тоже визуально отображается как зачёркнутый текст. Но его смысл другой.

• del — "этот текст был удалён из документа".
• s — "этот текст больше неактуален, но не обязательно как редактирование".

Проще запомнить так:

• Если вы фиксируете редактирование документа (до/после) — используйте del.
• Если вы просто показываете, что что-то "не действительно" или "не актуально", без явного акцента на правке — можно использовать s.

Пример:

<p>
  Старое название:
  <del>Компания Ромашка</del>
  Новое название: Компания Ромашка Плюс
</p>

<p>
  <s>Бесплатная доставка для всех заказов</s>
  Бесплатная доставка временно недоступна.
</p>

// В первом абзаце: // 1. Используем del - фиксируем изменение формулировки названия // Во втором абзаце: // 1. Используем s - показываем что правило больше не действует // 2. Но не обязаны хранить историю как "редактирование документа"

del и CSS свойство text-decoration

Иногда в коде можно увидеть такое:

<span style="text-decoration: line-through;">Старая цена</span>

// Здесь: // 1. Мы применяем только визуальный эффект зачёркивания // 2. Не передаём никакого смысла про удаление или изменение

Это допустимо, но вы теряете семантику. Более корректно:

<del>Старая цена</del>

А стили добавить в CSS:

del {
  text-decoration: line-through;  /* Визуальное зачёркивание */
  color: #777;                    /* Меняем цвет, чтобы отличать от обычного текста */
}

// Такой подход: // 1. Даёт браузерам и вспомогательным технологиям (читалкам экрана) понять смысл // 2. Упрощает поддержку и переиспользование стилей

Рекомендация: если вам нужен смысл "удалено/изменено" — начинайте с del, а не с CSS.

Связка del и ins – показ изменений "до/после"

Что такое ins и зачем он нужен вместе с del

Тег ins (inserted) обозначает добавленный текст. В паре с del он позволяет наглядно показывать, что было удалено и чем заменено.

Например, в системах рецензирования или при сравнении версий документов.

Давайте разберём простой пример.

<p>
  Стоимость доставки
  <del>350 ₽</del>
  <ins>250 ₽</ins>.
</p>

del {
  color: #a00;                   /* Красный цвет для удалённого */
  text-decoration: line-through;
}

ins {
  color: #080;                   /* Зелёный цвет для добавленного */
  text-decoration: underline;    /* Можно явно подчеркнуть */
}

// В этом примере: // 1. - старая стоимость // 2. - новая стоимость // 3. Цвет и оформление подчёркивают смысл изменения

Как видите, комбинация этих тегов делает изменения максимально читаемыми.

Пример "редлайна" в тексте документа

Давайте разберёмся на более текстовом примере.

<p>
  Клиент обязан
  <del>оплачивать услуги не позднее 5 числа каждого месяца</del>
  <ins>осуществлять оплату услуг не позднее 10 числа каждого месяца</ins>.
</p>

// Здесь: // 1. Мы не просто зачеркиваем старый текст // 2. Показываем конкретную новую формулировку // 3. Сохраняем полную прозрачность в юридическом контексте

Такая подача часто используется в договорах и регламентах при демонстрации внесённых изменений.

Синхронизация datetime между del и ins

Полезная практика — указывать одинаковый datetime в del и ins, если изменение произошло в один момент.

<p>
  <del datetime="2024-06-01">
    Сервис работает с 9:00 до 18:00 по будням.
  </del>
  <ins datetime="2024-06-01">
    Сервис работает с 8:00 до 20:00 по будням.
  </ins>
</p>

// В этом коде: // 1. datetime в обоих тегах одинаковый - изменение произошло одновременно // 2. Скрипты или внешние системы могут использовать это для построения истории

Если же у вас несколько последовательных изменений, можно указать разные значения datetime или сохранить историю в нескольких блоках.

Практические сценарии использования

Цены и скидки в интернет-магазине

Один из самых распространённых сценариев — отображение старой и новой цены.

<div class="product-price">
  <span class="label">Цена</span>
  <del class="product-price__old" datetime="2024-03-01">4 990 ₽</del>
  <span class="product-price__new">3 490 ₽</span>
</div>

.product-price__old {
  color: #999;
  margin-right: 8px;
}

.product-price__new {
  font-weight: 700;    /* Выделяем актуальную цену */
  color: #e53935;
}

// Здесь мы: // 1. Используем del для старой цены // 2. Сохраняем дату начала акции через datetime // 3. Визуально делаем акцент на новой цене

Ваши пользователи чётко видят изменение, а вы сохраняете семантику.

История изменений в документации

Теперь давайте перейдём к примеру с документацией.

<section>
  <h3>Ограничения API</h3>
  <p>
    <del datetime="2024-02-15">
      Максимальное количество запросов - 1000 в сутки.
    </del>
  </p>
  <p>
    <ins datetime="2024-02-15">
      Максимальное количество запросов - 5000 в сутки.
    </ins>
  </p>
</section>

// В этом фрагменте: // 1. Вы явно показываете пользователям что лимит был увеличен // 2. Не оставляете повода для двусмысленности // 3. Можете автоматически собирать историю изменений по datetime

Такой формат особенно удобен в разделах "Что изменилось" или "Breaking changes".

Уведомления об устаревших функциях или продуктах

Иногда нужно показать, что функция устарела, но ещё продолжает работать.

<p>
  <del datetime="2024-01-10">
    Метод <code>loginLegacy()</code> рекомендуется для всех новых проектов.
  </del>
  Вместо этого используйте
  <code>loginOAuth2()</code>.
</p>

// Здесь: // 1. Мы явно убираем рекомендацию по старому методу // 2. Сохраняем текст в документе для тех кто знаком со старой версией // 3. Направляем к новому варианту

Полезно для тех, кто мигрирует с предыдущих версий API или библиотеки.

Изменение условий и правил

Посмотрите, как можно отразить изменение сроков действия акции.

<p>
  Акция
  <del datetime="2024-03-01">действует до 31 марта 2024 года</del>
  <ins datetime="2024-03-10">продлена до 30 апреля 2024 года</ins>.
</p>

// В этом примере: // 1. Первое условие было заменено на новое // 2. Указаны разные даты изменений (если решение о продлении принято позже) // 3. Можно отследить историю принятия решений

Такой подход облегчает прозрачность и снижает количество вопросов со стороны пользователей.

Доступность и вспомогательные технологии

Как screen reader-ы обрабатывают del

Современные читалки экрана часто умеют оповещать пользователя о том, что текст удалён. Однако поведение может отличаться в зависимости от:

• конкретного screen reader;
• настроек пользователя;
• языка и окружения.

Важно понимать: добавляя del, вы увеличиваете шансы, что пользователь с нарушением зрения узнает, что этот текст неактуален. Если вы используете только CSS-зачёркивание, такой пользователь может об этом не догадаться.

Рекомендации по доступности

Обратите внимание на несколько практических советов:

1. Не злоупотребляйте del для мелких декоративных эффектов.
   Если текст по сути актуален, но вам хочется просто визуально "поиграть" — лучше используйте CSS.

2. Добавляйте текстовые пояснения там, где смысл может быть непонятен.

   <p>
     <span aria-label="Старая цена">
       <del>3990 ₽</del>
     </span>
     <span aria-label="Новая цена">2990 ₽</span>
   </p>

   // Здесь: // 1. Используем aria-label чтобы подсказать читалке экрана смысл цены // 2. Делаем восприятие более точным для пользователей с читалками

3. Не скрывайте del от читалок, если вы действительно хотите передать факт изменения.
   Избегайте избыточного aria-hidden="true" без необходимости.

Комментарии для пользователей без визуального контекста

Если вы показываете длинную историю изменений, бывает полезно добавить поясняющий текст для всех пользователей.

<p>
  Было:
  <del datetime="2024-02-01">минимальная сумма заказа 1000 ₽</del>
</p>
<p>
  Стало:
  <ins datetime="2024-02-01">минимальная сумма заказа 500 ₽</ins>
</p>

// В этом примере: // 1. Слова "Было" и "Стало" понятны всем пользователям // 2. Теги del и ins дополняют семантику и помогают вспомогательным технологиям

Так вы не полагаетесь только на визуальное оформление.

Работа с del в JavaScript

Поиск и обработка удалённого контента

Тег del — обычный DOM-элемент, вы можете взаимодействовать с ним через JavaScript. Например, собрать все удалённые фрагменты.

<p>
  <del data-change-id="1">Старый заголовок</del>
  <del data-change-id="2">Устаревшее описание</del>
</p>

<script>
// Находим все элементы <del> на странице
const deletedNodes = document.querySelectorAll('del');

// Выводим информацию о каждом в консоль
deletedNodes.forEach(node => {
  // Получаем текст внутри del
  const text = node.textContent.trim();

  // Получаем кастомный идентификатор изменения
  const changeId = node.dataset.changeId;

  console.log('Удалённый текст:', text, 'ID изменения:', changeId);
});
</script>

// В этом примере: // 1. Мы собираем все теги del // 2. Читаем их содержимое и data-атрибуты // 3. Можем дальше отправить эти данные на сервер или использовать внутри UI

Переключение видимости удалённого текста

Иногда нужно давать пользователю возможность "спрятать" удалённый текст, чтобы не мешал чтению.

Давайте посмотрим, что происходит в следующем примере.

<button id="toggleDeleted">Скрыть/показать удалённый текст</button>

<p>
  <del>Старое описание товара, устаревшее после обновления.</del>
  Новое описание товара с актуальными характеристиками.
</p>

<script>
// Находим кнопку и все элементы del
const toggleBtn = document.getElementById('toggleDeleted');
const deletedNodes = document.querySelectorAll('del');

let isHidden = false;

toggleBtn.addEventListener('click', () => {
  isHidden = !isHidden;

  deletedNodes.forEach(node => {
    // Переключаем видимость через CSS-свойство display
    node.style.display = isHidden ? 'none' : '';
  });
});
</script>

// Что делает этот код: // 1. При нажатии на кнопку мы скрываем или показываем все // 2. Используем простое переключение флага isHidden // 3. Меняем display только для элементов del, не затрагивая остальной текст

Такой подход удобен в системах рецензирования или при сравнении версий документов.

Автоматическое добавление del при редактировании текста

Если вы делаете интерфейс, где нужно сохранять историю изменений, можно автоматически оборачивать "старый" текст в del.

<p id="textBlock">Текущий текст, который можно изменить.</p>
<button id="updateText">Обновить текст</button>

<script>
// Находим элементы
const block = document.getElementById('textBlock');
const button = document.getElementById('updateText');

button.addEventListener('click', () => {
  // Сохраняем старый текст
  const oldText = block.textContent;

  // Создаём элемент <del> для старой версии
  const delNode = document.createElement('del');
  delNode.textContent = oldText;
  delNode.setAttribute('datetime', new Date().toISOString()); // Фиксируем время

  // Обновляем содержимое параграфа
  block.textContent = 'Новая версия текста. ';

  // Добавляем старый текст как удалённый
  block.appendChild(delNode);
});
</script>

// В этом коде: // 1. При нажатии на кнопку мы заменяем текст на новый // 2. Старую версию не удаляем а переносим внутрь // 3. Добавляем datetime с текущим временем (ISO-формат)

Так вы можете постепенно собирать историю правок прямо в тексте.

Стилизация тега del

Базовая стилизация

По умолчанию del уже отображается зачёркнутым, но вы можете настроить оформление.

del {
  text-decoration: line-through;  /* Явно включаем зачёркивание */
  color: #999;                    /* Делаем старый текст менее контрастным */
}

// Такая стилизация: // 1. Держит визуальный акцент на актуальном тексте // 2. Всё ещё оставляет удалённый текст читаемым при необходимости

Смена толщины и стиля линии

Можно немного "усилить" визуальный эффект.

del {
  text-decoration: line-through;
  text-decoration-thickness: 2px;  /* Толщина линии */
  text-decoration-color: #e53935;  /* Цвет линии */
}

// Здесь мы: // 1. Увеличиваем толщину линии зачёркивания // 2. Делаем её более заметной за счёт цвета

Учтите, что поддержка этих свойств в старых браузерах может быть ограниченной, но в современных работает надёжно.

Использование разных стилей для разных типов изменений

Можно разделять типы удалённого контента по классам.

<p>
  <del class="price-change">1990 ₽</del>
  <span class="price-current">1490 ₽</span>
</p>

<p>
  <del class="rule-deprecated">Этот тариф недоступен для новых клиентов.</del>
</p>

del.price-change {
  color: #b0bec5;                 /* Серый цвет для старых цен */
}

del.rule-deprecated {
  color: #d32f2f;                 /* Красный - для важных устаревших правил */
  font-style: italic;             /* Небольшой акцент */
}

// В таком решении: // 1. Мы разделяем типы "удалений" визуально // 2. Можем быстро менять стили отдельным группам, не ломая остальную вёрстку

Типичные ошибки и антипаттерны

Использование del только ради визуального эффекта

Некоторые разработчики используют del как способ быстро зачеркнуть текст, не задумываясь о смысле.

<!-- Не лучший подход -->
<del>Здесь просто хотят сделать оформительский эффект</del>

// Проблема в том что: // 1. Для машин и вспомогательных технологий это выглядит как реальное удаление // 2. Семантика документа искажается

Если нет реального смысла "удалено или заменено", лучше использовать span и CSS:

<span class="decorative-strike">Просто визуальное зачёркивание</span>

.decorative-strike {
  text-decoration: line-through;
}

Злоупотребление вложенными структурными элементами

Иногда del оборачивает слишком большие разделы, где лучше явно переписать текст, а не хранить огромные старые версии.

<!-- Слишком большой блок внутри del -->
<del>
  <section>
    <h2>Старый раздел документации</h2>
    <p>Много текста...</p>
    <p>Ещё больше текста...</p>
  </section>
</del>

// Потенциальная проблема: // 1. Документ становится тяжёлым и трудночитаемым // 2. Пользователь путается в большом количестве "мертвого" текста

Лучше сохранять историю версий в отдельном разделе или файле, а не в основном тексте, если изменений очень много.

Отсутствие явного нового (актуального) текста

Иногда разработчик зачеркивает старую фразу del, но не добавляет понятного альтернативного текста.

<p>
  <del>Доставка бесплатна</del>
</p>

// Пользователь видит: // 1. Старое утверждение зачёркнуто // 2. Но не понимает какое правило теперь действует

Правильнее:

<p>
  <del>Доставка бесплатна</del>
  Сейчас стоимость доставки рассчитывается при оформлении заказа.
</p>

// Так: // 1. Вы не оставляете пользователя в неопределённости // 2. Чётко сообщаете актуальное состояние

Заключение

Тег del в HTML — это не просто способ зачеркнуть текст, а инструмент для передачи важной семантики: "этот фрагмент был удалён или заменён". Он помогает:

• показывать историю изменений прямо в документе;
• делать интерфейсы и документы прозрачнее;
• улучшать доступность для пользователей с читалками экрана;
• отделять "устаревший" текст от актуального.

Вы увидели, как использовать del в сочетании с атрибутами datetime и cite, как комбинировать его с тегом ins для показа "до/после", как применять его в интерфейсах интернет-магазинов, документации и уведомлениях об изменениях. Также мы разобрали, почему важно отличать del от s и от простого зачёркивания через CSS.

Если вы будете использовать del только там, где действительно есть смысл "удаления", ваши HTML-документы станут понятнее как для пользователей, так и для машин.

Частозадаваемые технические вопросы по тегу del

Как скрыть содержимое del только визуально, но оставить его доступным для screen reader-ов

del.visually-hidden {
  position: absolute;  /* Убираем из потока */
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0); /* Обрезаем до невидимой области */
  overflow: hidden;
}

// Примените класс visually-hidden к del // Читалки экрана по-прежнему прочитают текст, но на экране его не будет

Можно ли вложить del внутрь ссылки a

Технически да, но лучше аккуратно продумывать смысл.

<a href="/old">
  <del>Старая страница раздела</del>
</a>

// Если страница больше неактуальна лучше: // 1. Убрать саму ссылку // 2. Или явно показать что раздел закрыт и дать альтернативный путь

Как корректно валидировать значение datetime внутри del

Сам HTML валидирует только общий формат, но вы можете дополнительно проверить его в JS.

function isValidDateTime(value) {
  // Пытаемся распарсить строку как дату
  const date = new Date(value);
  return !isNaN(date.getTime());
}

// Пример использования
const delNode = document.querySelector('del[datetime]');
const dt = delNode.getAttribute('datetime');

if (!isValidDateTime(dt)) {
  console.warn('Некорректное значение datetime в <del>', dt);
}

// Так вы можете отлавливать ошибки формата в рантайме

Как с помощью CSS выделить только те del, у которых есть datetime

del[datetime] {
  border-bottom: 1px dotted #ccc; /* Лёгкое подчёркивание для элементов с датой */
}

// Селектор del[datetime] применит стиль только к тегам del имеющим атрибут datetime

Как сделать всплывающую подсказку с датой удаления при наведении

<del datetime="2024-03-01" title="Удалено 01.03.2024">
  Устаревшее описание функционала
</del>

del[datetime] {
  cursor: help;  /* Подсказка что здесь есть дополнительная информация */
}

// Атрибут title показывает стандартный tooltip // Можно формировать значение title на сервере из datetime в удобном формате