<del> - The Deleted Text Element

The `<del>` Element

Inline HTML 4.0

The deleted text element represents text that has been deleted or removed from a document, typically displayed with a strikethrough.

Quick Example

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

Result

Interactive code playground requires JavaScript. Here's the code:

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

Syntax

<del>deleted text</del>

The <del> element indicates text that has been removed during editing or revision.

Attributes

Optional Attributes

Attribute	Description	Example
`cite`	URL explaining the deletion	`cite="https://example.com/changelog"`
`datetime`	When deletion occurred	`datetime="2024-12-11T10:30:00"`

<p>Price: <del cite="/changelog" datetime="2024-12-11">$99.99</del> $79.99</p>

Result

Interactive code playground requires JavaScript. Here's the code:

<p>Price: <del cite="/changelog" datetime="2024-12-11">$99.99</del> $79.99</p>

Common Use Cases

Price Changes

<p>Regular Price: <del>$199.99</del> <strong>Sale: $149.99</strong></p>
<p>Save <del>$50</del> $100 today!</p>

Result

Interactive code playground requires JavaScript. Here's the code:

<p>Regular Price: <del>$199.99</del> <strong>Sale: $149.99</strong></p>
<p>Save <del>$50</del> $100 today!</p>

Document Edits

<p>The deadline is <del>December 15</del> December 20, 2024.</p>
<p>Contact: <del>old-email@example.com</del> new-email@example.com</p>

Result

Interactive code playground requires JavaScript. Here's the code:

<p>The deadline is <del>December 15</del> December 20, 2024.</p>
<p>Contact: <del>old-email@example.com</del> new-email@example.com</p>

Corrections

<p>The population is <del>5 million</del> 5.2 million people.</p>
<p>Founded in <del>1995</del> 1996.</p>

Result

Interactive code playground requires JavaScript. Here's the code:

<p>The population is <del>5 million</del> 5.2 million people.</p>
<p>Founded in <del>1995</del> 1996.</p>

Version History

<article>
<h3>Document Version 2.0</h3>
<p><del datetime="2024-12-10">This paragraph was removed in the latest version.</del></p>
<p>The new policy takes effect immediately.</p>
</article>

Result

Interactive code playground requires JavaScript. Here's the code:

<article>
<h3>Document Version 2.0</h3>
<p><del datetime="2024-12-10">This paragraph was removed in the latest version.</del></p>
<p>The new policy takes effect immediately.</p>
</article>

With Insertions

Combine <del> with <ins> to show changes:

<p>The conference will be held in <del>New York</del> <ins>San Francisco</ins>.</p>
<p>Registration fee: <del>$500</del> <ins>$450</ins></p>

Result

Interactive code playground requires JavaScript. Here's the code:

<p>The conference will be held in <del>New York</del> <ins>San Francisco</ins>.</p>
<p>Registration fee: <del>$500</del> <ins>$450</ins></p>

Change Tracking

<p>
<del datetime="2024-12-10T09:00:00" cite="/edits/123">
  Old company name: Acme Corp
</del>
<ins datetime="2024-12-11T14:30:00" cite="/edits/124">
  New company name: Acme Industries Inc.
</ins>
</p>

Result

Interactive code playground requires JavaScript. Here's the code:

<p>
<del datetime="2024-12-10T09:00:00" cite="/edits/123">
  Old company name: Acme Corp
</del>
<ins datetime="2024-12-11T14:30:00" cite="/edits/124">
  New company name: Acme Industries Inc.
</ins>
</p>

`<del>` vs `<s>`

Important distinction:

<del>
<s>

<!-- Text that was removed/deleted -->
<p>Price: <del>$99</del> $79</p>
<p>Meeting: <del>Tuesday</del> Wednesday</p>

Use for content that has been removed during editing.

<!-- Text that is no longer accurate/relevant -->
<p><s>Out of stock</s> Back in stock!</p>
<p><s>Limited offer</s> Offer extended!</p>

Use for content that is no longer accurate but not deleted.

Styling

Customize the deleted text appearance:

<style>
del {
  text-decoration: line-through;
  color: #999;
  background: #ffe6e6;
  padding: 2px 4px;
}
del:hover::after {
  content: ' (removed)';
  font-size: 0.8em;
  color: #d73a49;
}
</style>

<p>The event starts at <del>7 PM</del> 6 PM.</p>

Result

Interactive code playground requires JavaScript. Here's the code:

<style>
del {
  text-decoration: line-through;
  color: #999;
  background: #ffe6e6;
  padding: 2px 4px;
}
del:hover::after {
  content: ' (removed)';
  font-size: 0.8em;
  color: #d73a49;
}
</style>

<p>The event starts at <del>7 PM</del> 6 PM.</p>

Comparison View

<style>
.comparison { font-family: monospace; }
.comparison del {
  background: #ffd7d7;
  color: #c00;
}
.comparison ins {
  background: #d7ffd7;
  text-decoration: none;
  color: #0c0;
}
</style>

<div class="comparison">
<p>- <del>Old line of code</del></p>
<p>+ <ins>New line of code</ins></p>
</div>

Result

Interactive code playground requires JavaScript. Here's the code:

<style>
.comparison { font-family: monospace; }
.comparison del {
  background: #ffd7d7;
  color: #c00;
}
.comparison ins {
  background: #d7ffd7;
  text-decoration: none;
  color: #0c0;
}
</style>

<div class="comparison">
<p>- <del>Old line of code</del></p>
<p>+ <ins>New line of code</ins></p>
</div>

Real-World Examples

E-commerce

<div class="product">
<h3>Premium Laptop</h3>
<p class="price">
  <del>$1,299.99</del>
  <strong style="color: #d73a49;">$999.99</strong>
  <span style="color: #0c0;">(Save $300!)</span>
</p>
</div>

Result

Interactive code playground requires JavaScript. Here's the code:

<div class="product">
<h3>Premium Laptop</h3>
<p class="price">
  <del>$1,299.99</del>
  <strong style="color: #d73a49;">$999.99</strong>
  <span style="color: #0c0;">(Save $300!)</span>
</p>
</div>

Legal Documents

<section>
<h4>Terms of Service (Revised)</h4>
<p>Section 3.2: <del datetime="2024-11-15">Users must verify email within 24 hours.</del> <ins datetime="2024-12-01">Users must verify email within 48 hours.</ins></p>
</section>

Result

Interactive code playground requires JavaScript. Here's the code:

<section>
<h4>Terms of Service (Revised)</h4>
<p>Section 3.2: <del datetime="2024-11-15">Users must verify email within 24 hours.</del> <ins datetime="2024-12-01">Users must verify email within 48 hours.</ins></p>
</section>

Meeting Minutes

<article>
<h3>Meeting Minutes - December 11, 2024</h3>
<p><strong>Attendees:</strong></p>
<ul>
  <li>John Smith</li>
  <li><del>Jane Doe (absent)</del></li>
  <li>Bob Johnson</li>
</ul>
</article>

Result

Interactive code playground requires JavaScript. Here's the code:

<article>
<h3>Meeting Minutes - December 11, 2024</h3>
<p><strong>Attendees:</strong></p>
<ul>
  <li>John Smith</li>
  <li><del>Jane Doe (absent)</del></li>
  <li>Bob Johnson</li>
</ul>
</article>

Recipe Updates

<div class="recipe">
<h4>Chocolate Chip Cookies (Updated)</h4>
<ul>
  <li><del>2 cups flour</del> <ins>2.5 cups flour</ins></li>
  <li>1 cup sugar</li>
  <li><del>1/2 cup butter</del> <ins>3/4 cup butter</ins></li>
</ul>
</div>

Result

Interactive code playground requires JavaScript. Here's the code:

<div class="recipe">
<h4>Chocolate Chip Cookies (Updated)</h4>
<ul>
  <li><del>2 cups flour</del> <ins>2.5 cups flour</ins></li>
  <li>1 cup sugar</li>
  <li><del>1/2 cup butter</del> <ins>3/4 cup butter</ins></li>
</ul>
</div>

Accessibility

Many screen readers announce deleted text as “deletion” or “removed,” helping users understand the content status.

Provide Context

Make sure the reason for deletion is clear:

Unclear
Clear

<p><del>Contact support</del></p>

<p><del>Contact support at [email protected]</del> New email: [email protected]</p>

Use with ARIA

For enhanced accessibility:

<p>
  <del aria-label="Removed: outdated information">
    Old contact information
  </del>
  <ins aria-label="Added: current information">
    New contact information
  </ins>
</p>

Block-Level Deletions

The <del> element can wrap block-level content:

<del>
<h3>Cancelled Event</h3>
<p>This section has been removed due to event cancellation.</p>
</del>

<h3>Replacement Event</h3>
<p>A new event will be scheduled for next month.</p>

Result

Interactive code playground requires JavaScript. Here's the code:

<del>
<h3>Cancelled Event</h3>
<p>This section has been removed due to event cancellation.</p>
</del>

<h3>Replacement Event</h3>
<p>A new event will be scheduled for next month.</p>

Browser Support

Browser	Version	Notes
Chrome	1+	Full support
Firefox	1+	Full support
Safari	1+	Full support
Edge	12+	Full support
IE	4+	Full support

The <del> element has excellent browser support across all versions.

For inserted or added text. Learn more →

~~For text that is no longer accurate. Learn more →~~

Specifications
Section titled “Specifications”

WHATWG HTML Living Standard

MDN Web Docs

Previous
<data> - The Data Element Next
<dfn> - The Definition Element

<del> - The Deleted Text Element

The <del> Element

Quick Example

Syntax

Attributes

Optional Attributes

Common Use Cases

Price Changes

Document Edits

Corrections

Version History

With Insertions

Change Tracking

<del> vs <s>

Styling

Comparison View

Real-World Examples

E-commerce

Legal Documents

Meeting Minutes

Recipe Updates

Accessibility

Screen Reader Behavior

Provide Context

Use with ARIA

Block-Level Deletions

Browser Support

Related Elements

Specifications

The `<del>` Element

`<del>` vs `<s>`