<del>

Definition and Usage

The <del> element establishes text that has been deleted from a document. Browsers will usually strike a line through deleted text.

Use the <del> tag together with the <ins> tag to mark up inserted and deleted text in a document.

Attributes

The <del> tag also supports the Global Attributes in HTML.

The <del> tag has the following specific attributes:

Examples

Basic Deleted Text

Mark text as deleted:

<p>My favorite color is <del>blue</del> red.</p>

Using with <ins> Tag

Combine deleted and inserted text:

<p>The meeting is scheduled for <del>Tuesday</del> <ins>Wednesday</ins> at 3 PM.</p>

With cite and datetime Attributes

Add metadata about the deletion:

<p>
  <del cite="https://example.com/changes.html" datetime="2025-01-15T09:00:00Z">
    The price is $99.99
  </del>
</p>

Document Changes

Track revisions in a document:

<p>
  The project deadline is <del>December 31, 2024</del>
  <ins>January 15, 2025</ins>.
</p>

<p>
  Team size: <del>5 members</del> <ins>7 members</ins>
</p>

Price Changes

Show price updates:

<div class="product">
  <h3>Premium Plan</h3>
  <p class="price">
    <del>$49.99/month</del>
    <ins>$39.99/month</ins>
  </p>
  <p>Save $10!</p>
</div>

Version Control

Display document version history:

<article>
  <h2>Policy Update</h2>
  <p>
    <del datetime="2024-12-01">
      All employees must work from office 5 days a week.
    </del>
  </p>
  <p>
    <ins datetime="2024-12-15">
      Employees can work remotely up to 3 days per week.
    </ins>
  </p>
</article>

<del> vs <s> Tag

Both tags create strikethrough text, but they have different semantic meanings:

Styling Deleted Text with CSS

Customize the appearance of deleted text:

<style>
  del {
    text-decoration: line-through;
    color: #e74c3c;
    background-color: #ffe6e6;
    padding: 2px 4px;
  }

  del.subtle {
    opacity: 0.6;
    text-decoration: line-through double;
  }

  del.highlight {
    background-color: #ffebee;
    border-left: 3px solid #e74c3c;
    padding-left: 8px;
  }
</style>

<p>Default: <del>This text was removed</del></p>
<p>Subtle: <del class="subtle">This text was removed</del></p>
<p>Highlighted: <del class="highlight">This text was removed</del></p>

Use Cases

• Document Revisions: Track changes in collaborative documents and show editing history
• Editing History: Display what has been removed or changed in articles and blog posts
• Legal Documents: Show amendments, corrections, and modifications in legal texts
• Price Updates: Highlight price reductions and special offers in e-commerce
• Version Control: Display differences between document versions
• Content Updates: Show outdated information alongside new content
• Collaborative Editing: Track suggestions and changes from multiple authors
• Transparency: Maintain transparency by showing what was changed in public documents

Try it Yourself

Best Practices

• Use <del> for content that has been removed, not for strikethrough styling
• Combine with <ins> to show the replacement content
• Add cite and datetime attributes for important changes
• Use <s> instead of <del> for content that is no longer accurate
• Style deleted text appropriately to make it visually distinct but still readable
• Consider accessibility - ensure deleted text is still accessible to screen readers
• Use semantic HTML instead of CSS strikethrough for meaningful deletions

Related Tags

• <ins>

  Defines inserted text

• <s>

  Defines strikethrough text

• <mark>

  Defines marked/highlighted text