HTML / HTML Tags

HTML <Del> Tag

Dec 12, 2022
2 min read
HTML del Tag

Definition

The <del> tag indicates the content has been removed from the document. Browsers will display the <del> element with a line running through it.

Example

<p>There are some <del>deleted words</del> in this paragraph</p>

There are some deleted words in this paragraph

Usage

  • Both the starting and closing tags are mandatory.
  • When coupled with the <ins> tag (indicates text has been inserted into the document), the <del> tag can be used to show “tracked changes” or source code diff.

Attributes

The <del> element supports the Global Attributes, as well as the following:

  • cite

    The cite attribute is used to specify the URL of a document that states the the reason the text was deleted. The URL is relative to the document, and URL fragments are recommended to point to the specific location in the document that explains the change. For example:

    <p>There are some <del cite="#deletion1">deleted words</del> in this paragraph</p>
    
    <p id="deletion1">Demonstrating del element</p>

  • datetime

    The datetime attribute specifies the date and optionally the time that the text was deleted. The datetime’s attribute’s value must be a valid date string. For example:

    <p>There are some <del datetime="2009-10-10T23:38-07:00" cite="Demonstrating del element">deleted words</del> in this paragraph</p>

Best Practices

  • Most screen readers do not announce the <del> element. You can use CSS to add hidden content before and after the <del> element, which screen readers will announce.

    For example, you can adapt this technique:

    <style>
    del::before, del::after {
    content:" [Deletion start] ";
    clip-path: inset(100%);
    clip: rect(1px, 1px, 1px, 1px);
    height: 1px;
    width: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    }
    del::after {
    content:" [Deletion end] ";
    }
    </style>
    <p>
    <del>This deleted text</del> is shown as deleted.
    </p>
    Some users of screenreaders may disable announcing such long-winded content, so the best practice is probably to avoid using the <del> element unless absolutely necessary.

Specification

Browser Support

Desktop

ChromeEdgeFirefoxIEOperaSafari
YesYesYesYesYesYes

Mobile

Android WebviewChrome AndroidFirefox AndroidOpera AndroidiOS SafariSamsung Internet
YesYesYesYesYesYes