htmlfreecodes.
Menu

<del>

Defines text that has been deleted from a document

Quick Answer

What is the HTML <del> tag?

The <del> tag marks deleted or removed text, typically displayed with a strikethrough. Use the datetime attribute to specify when the deletion occurred and cite attribute for reference URL. Pair with <ins> for insertions. This semantic element is useful for document revision tracking and editorial changes.

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.

Tip: Use the <del> tag to show document changes, editing history, and version control information.
Tip: The <del> tag is useful for legal documents, collaborative editing, and tracking document revisions.

Browser support and standards

Browser rendering and modern HTML conformance are different questions. Check the current element reference for the browsers and features your project needs; the older source version table is not a current compatibility guarantee.

Read the MDN element reference

Attributes

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

The <del> tag has the following specific attributes:

Attribute Value Description
cite URL Specifies a URL to a document that explains the reason why the text was deleted
datetime YYYY-MM-DDThh:mm:ssTZD Specifies the date and time when the text was deleted

Examples

Basic Deleted Text

Mark text as deleted:

Example

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

Using with <ins> Tag

Combine deleted and inserted text:

Example

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

Example

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

Example

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

Example

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

Example

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

Feature <del> <s>
Purpose Indicates deleted/removed content Indicates content that is no longer accurate or relevant
Use Case Document edits, version control Outdated information, no longer valid
Attributes cite, datetime None (only global attributes)
Example Meeting moved from Tuesday to Wednesday Product discontinued

Styling Deleted Text with CSS

Customize the appearance of deleted text:

Example

<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

Interactive Example

See how deleted text appears in different contexts:

Simple deletion: My name is John Jane.

Price change: $99.99 $79.99

Version update: Version 1.0 Version 2.0

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