<del>

The <del> tag is used to display deleted content. For example, a completed item in a to-do list or a deleted part of code.

The tag has a built-in role deletion. Thanks to it, users using screen readers know that the content has been deleted.

        
          
          <h4>To-do List</h4><ul>  <li>    <del>Wash the dishes</del>  </li>  <li>    <del>Water the plants</del>  </li>  <li>Walk the dog</li>  <li>Vacuum the room</li></ul>
          <h4>To-do List</h4>
<ul>
  <li>
    <del>Wash the dishes</del>
  </li>
  <li>
    <del>Water the plants</del>
  </li>
  <li>Walk the dog</li>
  <li>Vacuum the room</li>
</ul>

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

By default, browsers apply strikethrough to <del> using text-decoration: line-through. The same effect can be achieved using the <s> tag or applying text-decoration: line-through to text. However, <del> should be used when it is important to emphasize that some content has been deleted. Although visually there will be no differences, it will help, for example, users using screen readers.

In addition to global attributes, <del> has specific ones:

• cite allows referencing information about the edit;
• datetime allows specifying the time of the edit.

Both attributes are optional and help clarify the edit.

        
          
          <h4>Project Submission</h4><ul>  <li>    <del cite="https://our-cool-customers.com/reports/123">      Upload the report to the client's service    </del>  </li>  <li>    <del datetime="2021-12-21T15:00Z">      Call the contractor regarding the acts    </del>  </li>  <li>Agree on a new payment form with lawyers</li></ul>
          <h4>Project Submission</h4>
<ul>
  <li>
    <del cite="https://our-cool-customers.com/reports/123">
      Upload the report to the client's service
    </del>
  </li>
  <li>
    <del datetime="2021-12-21T15:00Z">
      Call the contractor regarding the acts
    </del>
  </li>
  <li>Agree on a new payment form with lawyers</li>
</ul>

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

By default, attribute values are invisible to the user, but they can be automatically output using scripts. For example, we can add the date and time of deletion for all deleted items, which would look something like this:

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

        
        
          
            
            Copy
            Copied
            Failed to copy