The HTML <del> Tag

John on December 30, 2020

The del tag in HTML represents deleted text and is often used to only delete a section of text inside a paragraph or heading.

How to use the Delete Tag

The del tag requires an opening and closing tag wrapping text that should have an effect applied like this:

<p>The quick brown <del>fox</del> cat jumps over the lazy dog.</p>

The quick brown fox cat jumps over the lazy dog.

The default behaviour of the del tag in most browsers is to display text with a strikethrough, which is typically a small line through the middle of the text.

Creating Spoiler Text with the Delete Tag

Another tag that has the same default styling as the del tag is the HTML s tag, we can therefore change the del tag to completely hide text using CSS while maintaining the ability to create regular strikethroughs.

<p>The quick brown <del>fox</del> cat jumps over the lazy dog.</p>

del {
	color: #000;
	background: #000;
	text-decoration: none;
}

The way this CSS example works is to make the background color the same as the text color on the content inside all del tags.

We could improve this to reveal the text on hover with a transition for a nice fade-in effect like this:

<p>The quick brown <del>fox</del> cat jumps over the lazy dog.</p>

del {
	color: #000;
	background: #000;
	text-decoration: none;
	transition: all 0.5s;
}

del:hover {
	background: transparent;
}

Provide a Citation on Deleted HTML Text

To provide a citation for some deleted text in HTML use the cite attribute on the del tag passing a URL as the content.

<p>The quick brown <del cite="/reason_why.html">fox</del> cat jumps over the lazy dog.</p>

Provide a Time of Deletion in HTML Text

It is possible to provide a time of deletion of a selection of text by using the datetime attribute on the del tag like this:

<p>The quick brown <del datetime="1955-11-12T06:00:00Z">fox</del> cat jumps over the lazy dog.</p>

The date format when broken down works like this:

• YYYY - year
• MM - month (02 for February .etc)
• DD - day of the month (08)
• T or a space - a separator for the time part of the date
• hh - hour (24-hour clock)
• mm - minutes (55 for example)
• ss - seconds (03 for example)
• TZD - Time Zone Designator

Browser Support

The del tag is supported by all popular web browsers including, Chromium, Firefox, Internet Explorer, Safari and Opera.

Conclusion

The del HTML tag is useful for deleting text with a different style than a strikethrough and providing a citation for the reason of deletion and the date of deletion.