HTML <del> Tag

The HTML <del> tag is used to represent deleted or removed text. It visually indicates content that has been removed by rendering it with a strikethrough in most browsers. Additionally, it can provide semantic meaning about content changes, making it useful for tracking edits in documents or collaborative environments.

The <del> tag is often paired with the <ins> tag, which represents inserted text, to provide a clear context of changes.

Basic Syntax of HTML <del> Tag

The basic syntax for using the <del> tag is:

</>
Copy
<del>Deleted text</del>

Browsers render the text inside the <del> tag with a line through it to indicate it has been removed.

Attributes of HTML <del> Tag

  • cite: Specifies a URL that explains the reason for the deletion or provides additional context.
  • datetime: Specifies the date and time when the text was deleted. The value must be in a valid datetime format (e.g., YYYY-MM-DDThh:mm:ss).

Basic Example of HTML <del> Tag

Here’s an example of using the <del> tag to show removed text:

index.html

</>
Copy
<!DOCTYPE html>
<html>
    <body>
        <h2>Basic Example</h2>
        <p>The price of the product was <del>$100</del>, but it is now <ins>$80</ins>.</p>
    </body>
</html>

Explanation: In this example, the text $100 is marked as deleted using the <del> tag, while the updated price $80 is marked as inserted using the <ins> tag.

Using the cite and datetime Attributes with <del> tag

You can add metadata to the <del> tag using the cite and datetime attributes:

index.html

</>
Copy
<!DOCTYPE html>
<html>
    <body>
        <h2>Example with Attributes</h2>
        <p>The article was updated. The previous title was: <del cite="https://example.com/changes" datetime="2024-12-10T10:00:00">How to Learn HTML</del>.</p>
    </body>
</html>

Explanation: The cite attribute provides a URL that explains why the text was deleted, and the datetime attribute specifies when the change occurred.

Styling the <del> Tag with CSS

You can customize the appearance of the <del> tag using CSS:

index.html

</>
Copy
<!DOCTYPE html>
<html>
    <head>
        <style>
            del {
                color: red;
                text-decoration: line-through;
                font-weight: bold;
            }
        </style>
    </head>
    <body>
        <h2>Styled <del> Example</h2>
        <p>This item was previously priced at <del>$150</del>.</p>
    </body>
</html>

Result: The deleted text appears red, bold, and with a strikethrough, making it visually distinct.

Practical Applications of <del> Tag

  • Tracking Changes: Useful in collaborative documents or websites where content edits need to be tracked visually.
  • Displaying Updates: E-commerce sites can use the <del> tag to show old prices alongside new ones.
  • Legal or Revision Notes: Legal documents or revision notes can use the <del> tag to indicate removed sections.

Special Cases for HTML <del> Tag

1. Combining <del> tag with JavaScript

You can dynamically update or manipulate the <del> tag using JavaScript:

index.html

</>
Copy
<!DOCTYPE html>
<html>
    <body>
        <h2>Dynamic Update Example</h2>
        <p>This item was <del id="oldPrice">$200</del> but is now $150.</p>

        <script>
            const delTag = document.getElementById("oldPrice");
            delTag.setAttribute("datetime", new Date().toISOString());
            delTag.setAttribute("cite", "https://example.com/price-changes");
        </script>
    </body>
</html>

Explanation: The script dynamically adds datetime and cite attributes to the <del> tag, making it more informative.