<del>

Время чтения: меньше 5 мин

Кратко

Секция статьи "Кратко"

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

Как пишется

Секция статьи "Как пишется"
        
          
          <h4>Список дел</h4><ul>  <li><del>Помыть посуду</del></li>  <li><del>Полить цветы</del></li>  <li>Погулять с собакой</li>  <li>Пропылесосить комнату</li></ul>
          <h4>Список дел</h4>
<ul>
  <li><del>Помыть посуду</del></li>
  <li><del>Полить цветы</del></li>
  <li>Погулять с собакой</li>
  <li>Пропылесосить комнату</li>
</ul>

        
        
          
        
      
Открыть демо в новой вкладке

Как понять

Секция статьи "Как понять"

По умолчанию браузеры применяют к <del> перечёркивание с помощью text-decoration: line-through. Такого же эффекта можно добиться, используя тег <s> или просто применив к тексту text-decoration: line-through. Однако <del> стоит использовать в том случае, когда нужно подчеркнуть, что какой-то контент был удалён и это важно. Хоть визуально отличий не будет, но это поможет, например, пользователям скринридеров.

Атрибуты

Секция статьи "Атрибуты"

Помимо глобальных атрибутов у <del> есть специфические:

  • cite позволяет сослаться на информацию о правке;
  • datetime позволяет указать время правки.

Оба атрибута необязательные и помогают уточнить правку.

        
          
          <h4>Сдача проекта</h4><ul>  <li>    <del cite="https://our-cool-customers.com/reports/123">      Выгрузить отчёт в сервис заказчика    </del>  </li>  <li>    <del datetime="2021-12-21T15:00Z">      Созвониться с подрядчиком по поводу актов    </del>  </li>  <li>Согласовать новую форму оплаты с юристами</li></ul>
          <h4>Сдача проекта</h4>
<ul>
  <li>
    <del cite="https://our-cool-customers.com/reports/123">
      Выгрузить отчёт в сервис заказчика
    </del>
  </li>
  <li>
    <del datetime="2021-12-21T15:00Z">
      Созвониться с подрядчиком по поводу актов
    </del>
  </li>
  <li>Согласовать новую форму оплаты с юристами</li>
</ul>

        
        
          
        
      

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

Открыть демо в новой вкладке

На практике

Секция статьи "На практике"

Иван Ельцов

Секция статьи "Иван Ельцов"

<del> часто используется вместе с <ins> в кодовых базах для отображения изменений в коде. Например, при просмотре изменений в пулреквесте в GitHub мы видим список изменений примерно так:

        
          
          <pre>  body {    font-size: 16px;    <del>color: black;</del>    <ins>color: white;</ins>  }</pre>
          <pre>
  body {
    font-size: 16px;
    <del>color: black;</del>
    <ins>color: white;</ins>
  }
</pre>

        
        
          
        
      
Открыть демо в новой вкладке