HTML <del> Tag

The HTML <del> tag is used to represent text that has been deleted from a document. It's primarily used to track revisions and show what content has been removed, providing clear visual cues that text is no longer part of the current version. This tag plays a vital role in semantic HTML, making content changes easily understandable for both users and search engines.

Syntax

<del cite="url" datetime="YYYY-MM-DDThh:mm:ssZ">Deleted text</del>

Attributes

Example

<p>This is a <del>sample</del> text with a word deleted.</p>

More Examples

Basic Deletion

This is the simplest usage of the <del> tag, marking a word or phrase as deleted.

<p>The price was <del>$19.99</del>, now it's $14.99.</p>

Using the cite Attribute

The cite attribute can be used to provide context or a link to the reason for deletion, often in an editorial or collaborative setting.

<p>This <del cite="/revisions/doc123.html">paragraph was redundant</del> in the previous draft.</p>

<p>For more information about why this sentence <del cite="https://example.com/reason-for-deletion.html">was removed,</del> please refer to the attached document.</p>

Using the datetime Attribute

The datetime attribute allows you to specify when the deletion occurred, providing an additional layer of revision information.

<p>The team decided to <del datetime="2024-02-29T14:30:00Z">push the launch date</del> to next month.</p>

Combined Attributes

It's possible to use cite and datetime together for detailed tracking.

<p>The marketing copy <del cite="/revisions/campaign.html" datetime="2024-03-01T10:00:00Z">used an old tagline</del> and needed to be updated.</p>

Contextual Use with <ins> Tag

Often used with the <ins> tag for showing both deleted and inserted content, especially in revision tracking scenarios.

<p>The meeting is <del>scheduled for Thursday</del> <ins>rescheduled to Friday</ins>.</p>

Block-Level Deletion

The <del> tag can also be used to mark a block of text as deleted.

<p>
    The following paragraph was deemed no longer relevant:
    <del>
        <p>This is a deleted paragraph. It contained information that is no longer accurate. This is an example of a block level deleted tag. </p>
    </del>
</p>

Browser Support

The <del> tag is supported by all modern browsers:

• Chrome
• Edge
• Firefox
• Safari
• Opera

Notes and Tips

• The <del> tag visually renders deleted text with a strikethrough.
• Use the cite attribute to link to a document providing the reason for the deletion for better context and revision clarity.
• The datetime attribute helps in maintaining a chronological history of changes.
• Combine <del> with the <ins> tag to clearly mark both deletions and insertions, especially in revision tracking or change logs.
• Use the <del> tag in collaborative documents, editorial workflows, or any application that requires tracking of changes in the content.
• The information provided by cite and datetime attributes may not always be visible to the user, but it is vital for SEO and accessibility.
• When using datetime, ensure that you adhere strictly to the ISO 8601 date and time format for universal readability.