<del>

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

У тега есть встроенная роль deletion. Благодаря ей пользователи скринридеров знают, что содержимое было удалено.

        
          
          <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>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

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

        
          
          <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>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать