Definition and Usage

The <del> tag represents a range of text that has been deleted from a document.

It is commonly used to indicate removed content, highlight changes, or show differences between revisions.

Basic Example

HTML 
<h3>To-Do List</h3>
<ul>
  <li>Unload the dishwasher</li>
  <li><del datetime="2019-10-11T01:25-07:00">Watch school lecture</del></li>
  <li><del datetime="2019-10-10T23:38-07:00">Download more music files</del></li>
  <li>Buy a printer</li>
</ul>
Rendered Output

The <del> tag is primarily used to highlight deleted text and visually indicate changes in a document or source code. This makes it useful for tracking modifications within documents or source code.

Most browsers render deleted text with a strikethrough by default.

Note:
If the content is meant not to indicate removal or deletion, but simply to show that the information is inaccurate or that the idea has changed and been canceled, then the <s> tag is more appropriate.

Using <del> and <ins> Tags Together

The <del> tag is often used in conjunction with the <ins> tag.
Using both tags together allows you to semantically distinguish between the original and modified content, making it easier to clearly communicate change history.

The <ins> tag serves the opposite purpose of the <del> tag and is used to indicate inserted text in an HTML document.

Here is a common example demonstrating the combined use of these two tags:

HTML 
<p>Shipping cost: <del>$50</del> <ins>Free</ins></p>
Rendered Output

Attributes

The <del> tag supports all global attributes.

cite Attribute

The cite attribute of the <del> tag specifies a URL pointing to a resource that explains the reason for the deletion.

Including the cite attribute on a <del> tag is optional. However, it helps provide additional context to users by linking to the source or explanation of the change.

For example, the cite attribute can link to a meeting minutes document, issue tracker ticket, or other reference that details the deleted content or background information.

HTML 
<p>
    The following feature has been removed.
    <del cite="https://example.com/changelog">
        Details about the removed feature...
    </del>
</p>

In the example above, the cite attribute points to the original resource page containing information about the canceled or deleted feature.

Note that the value of the cite attribute is not displayed to users in the browser. However, it can be useful for authors, developers, or search engines

datetime Attribute

The datetime attribute of the <del> tag represents the date and time when the content was deleted.

Like the cite attribute, the datetime attribute is optional on the <del> tag. However, it provides precise timing information for the deletion, which is useful for managing update histories and conveying time-based data.

Valid Values for datetime

The value of the datetime attribute must be a valid date or date-time string as defined by the HTML specification.

Here's an example that includes both cite and datetime attributes:

HTML 
<p>
    The following feature has been removed.
    <del cite="https://example.com/changelog" datetime="2022-11">
        Details about the removed feature...
    </del>
</p>

Important Note

The <del> tag should not be used across paragraph boundaries. Its use must be structurally clear and properly scoped. Ambiguous placement can lead to unclear document structure and incorrect semantics.

Let's look at an example:

HTML 
<!-- First example: incorrect use of <del> tag crossing paragraph boundaries -->
<aside>
    <!-- Warning: Do not use the <del> tag like this -->
    <del>
        <!-- This improperly spans across paragraph boundaries -->
        <p>I like fruit.</p> <!-- First paragraph starts -->
        Apples are <em>delicious</em>. <!-- First paragraph ends: paragraph boundaries are not explicitly marked -->
    </del>
    <del>
        Pears are also tasty. <!-- Second paragraph starts -->
    </del> <!-- Second paragraph ends -->
</aside>

<!-- Second example: correct use of <del> tag with clear structure -->
<aside>
    <!-- Each <del> tag clearly marks separate paragraphs -->
    <del>
        <p>I like fruit.</p> <!-- First paragraph starts -->
    </del> <!-- First paragraph ends -->
    <del>
        Apples are <em>delicious</em>. <!-- Second paragraph starts -->
    </del> <!-- Second paragraph ends -->
    <del>
        Pears are also tasty. <!-- Third paragraph starts -->
    </del> <!-- Third paragraph ends -->
</aside>
  1. In the first example, the <del> tag spans across two paragraphs without clear boundaries, which is considered improper and ambiguous usage.
  2. In the second example, each changed portion is enclosed in its own <del> tag, clearly representing individual paragraphs. This provides a clearer structure and makes paragraph boundaries and changes explicit.

Therefore, when using the <del> tag, it is important to maintain clear separation between changes and paragraph structures as shown in the second example. This helps keep the document well-structured and makes it easier for users to understand the modifications.

Browser compatibility

Browser compatibility for the del tag
Tag
Desktop Chrome
Chrome
DesktopDesktop Edge
Edge
Desktop Firefox
Firefox
Safari
Safari
<del> 1 12 1 4

Specifications

Specification for the del tag
Specification
<del> HTML Standard
#the-del-element

References

See also