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:
Some users of screenreaders may disable announcing such long-winded content, so the best practice is probably to avoid using the<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>
<del>
element unless absolutely necessary.
Specification
Browser Support
Desktop
Chrome | Edge | Firefox | IE | Opera | Safari |
---|---|---|---|---|---|
Yes | Yes | Yes | Yes | Yes | Yes |
Mobile
Android Webview | Chrome Android | Firefox Android | Opera Android | iOS Safari | Samsung Internet |
---|---|---|---|---|---|
Yes | Yes | Yes | Yes | Yes | Yes |