W3docs
en
Log in

HTML <del> Tag

The <del> tag marks text removed from a document. Learn its cite and datetime attributes, pairing with <ins>, and accessibility, with examples.

The <del> tag marks a span of text that was deleted from a document. It is a semantic element: it does not just cross text out, it records that the content was intentionally removed as part of an edit. Browsers render it with a strikethrough by default, but the meaning is carried in the markup, not the styling.

Use <del> whenever you want to show a history of changes, for example:

  • Tracked edits — keeping the original wording visible while showing it was removed (changelogs, wikis, collaborative documents).
  • Price reductions — striking the old price and showing the new one next to it.
  • Corrections — preserving a mistake on the record (a published correction) instead of silently deleting it.

<del> is almost always paired with the <ins> tag, which marks newly inserted text and is underlined by default. Together they express "this was replaced by that."

When NOT to use <del>

If you only want a strikethrough effect with no "this was edited" meaning, <del> is the wrong tool:

  • For content that is no longer accurate or relevant (but was not deleted in an edit) — such as a sold-out product or an expired offer — use the <s> tag.
  • For a purely visual strikethrough with no semantic intent, use the CSS text-decoration property with the line-through value. text-decoration: line-through is presentational and is ignored by assistive technology, whereas <del> conveys meaning to it.

In short: reach for <del> when the strikethrough means "removed in an edit," and reach for CSS when you just need the line.

Tip

You can restyle a <del> element freely with CSS — for example change its color or replace the default strikethrough — without losing its meaning, because the semantics live in the tag, not the styling.

Accessibility

Screen readers do not all treat <del> the same way. By default, NVDA and JAWS usually read the deleted text inline like any other text and do not announce that it was deleted unless the user enables the relevant verbosity setting — so a sighted user sees the strikethrough while a screen-reader user may hear nothing about the edit.

When the deletion itself is important to understand the content (for example, the difference between an old and a new price), add an explicit cue rather than relying on the visual line:

<p>
  Price:
  <del><span class="visually-hidden">Old price: </span>$99</del>
  <ins><span class="visually-hidden">New price: </span>$79</ins>
</p>

Avoid trying to inject "deleted" text through CSS content — generated content is inconsistently exposed to assistive technology. Prefer visible text, an aria-label, or aria-describedby on the element when extra context is needed.

Syntax

The <del> tag comes in pairs. The content is written between the opening (<del>) and closing (</del>) tags.

Example of the HTML <del> tag

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p>My favorite color is <del>green</del> <ins>blue</ins>!</p>
  </body>
</html>
Try it Yourself »

Real-world example: a price reduction

The most common use of <del> paired with <ins> is showing an old price next to a new one:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p>Special offer: <del>$99</del> <ins>$79</ins></p>
  </body>
</html>

The old price stays on the page (struck through) and the new price is marked as inserted, so both the visual result and the markup tell the same story.

Example of the HTML <del> tag with the cite attribute

The cite attribute holds a URL pointing to a document that explains why the text was changed — a changelog entry, a diff, or an issue tracker link, not the deleted content itself:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p>
      The release date is
      <del cite="https://example.com/changelog#2023-10-25">October 25</del>
      <ins cite="https://example.com/changelog#2023-11-02">November 2</ins>.
    </p>
  </body>
</html>
Try it Yourself »

Example of the HTML <del> tag with the datetime attribute

The datetime attribute records when the deletion happened in machine-readable form:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p>The <del datetime="2023-10-25T14:30:00Z">old text</del> was replaced with new content.</p>
  </body>
</html>
Try it Yourself »

The datetime format

The datetime value follows the format YYYY-MM-DDThh:mm:ssTZD:

  • YYYY-MM-DD — the date (year, month, day). This part is required.
  • T — a literal separator between the date and the time.
  • hh:mm:ss — the time. The whole time portion is optional — a plain date is valid.
  • TZD — the Time Zone Designator: either Z for UTC, or an offset such as +02:00 / -05:00.

Valid values:

2023-10-25                     <!-- date only -->
2023-10-25T14:30               <!-- date + time, no seconds -->
2023-10-25T14:30:00Z           <!-- UTC -->
2023-10-25T14:30:00+02:00      <!-- with a time-zone offset -->

Invalid values:

25-10-2023                     <!-- wrong order; must be YYYY-MM-DD -->
2023/10/25                     <!-- wrong separators; must use hyphens -->
2023-10-25 14:30:00            <!-- space instead of the "T" separator -->

Attributes

AttributeValueDescription
citeURLURL of a document (changelog, diff, issue) that explains why the text was edited or deleted.
datetimeYYYY-MM-DDThh:mm:ssTZDThe date (and optional time) when the text was deleted.

The <del> tag also uses the Global Attributes and the Event Attributes.

  • <ins> — marks inserted text; the natural partner of <del>.
  • <s> — marks text that is no longer accurate or relevant (not deleted in an edit).

Practice

Practice
What does the HTML <del> tag represent?
What does the HTML <del> tag represent?
Was this page helpful?