del tag in HTML (strikethrough)

In this article, we have explained the del tag in HTML which is used to display a line midway across a text. We have explained the use of attributes and properties of del tag.

Table of contents:

  1. del tag in HTML
  2. Attributes of del tag
  3. CSS with del tag
  4. Double Strikethrough in del tag

Let us get started with del tag in HTML.

del tag in HTML

We can strikethrough text in HTML using del tags.

del tags are supported in HTML5 unlike the other tags like strike which were supported in previous HTML versions. Hence, to Strikethrough text, you must use del tags.

One can use del tag as follows:

This is <del>NOT</del> OpenGenus.

Output:

This is NOT OpenGenus.

The alternatives to del tag are:

  • strike tag (deprecated in HTML5)
  • s tag (not recommended to use)

del tag is supported in all major browsers like:

  • Chrome
  • Internet Explorer / Edge
  • Mozilla
  • Safari
  • Opera

Attributes of del tag

del tag has two attributes:

  • cite
  • datetime

cite holds an URL that explains why the text was deleted.

datetime specifies the date and time in the format YYYY-MM-DD Thh:mm:ssTZD when the text was deleted.

Syntax to use cite attribute is:

<del cite="URL">

cite attribute can be used as follows:

<p>OpenGenus has 
    <del cite="http://internship.opengenus.org">
        paused its Internship program due to COVID19
    </del> 
    restarted its Internship program.
</p>

In the above example, the text mentioning that OpenGenus has paused its Internship program due to COVID19 is striked out and it linkes to the Internship page that mentions that the Internship program is running.

Hence, this way you can use the cite attribute of del tag.

Syntax to use datetime is:

<del datetime="YYYY-MM-DDThh:mm:ssTZD">

This text has been deleted

datetime attribute can be used as follows:

<p>OpenGenus has 
    <del datetime="2020-07-20T22:55:03Z">
        paused its Internship program due to COVID19
    </del> 
    restarted its Internship program.
</p>

The components in datetime are:

  • YYYY: year (example 2021)
  • MM: month (example 09 for September)
  • DD: day of the month (example 19)
  • T: a separator (required if time is also specified or a space)
  • hh: hour (example: 20 for 08.00 PM)
  • mm: minutes (example: 41)
  • ss: seconds (example: 24)
  • TZD: Time Zone Designator (Z denotes Zulu, also known as Greenwich Mean Time)

Similarly, we can use cite and datetime can be used together:

<p>OpenGenus has 
    <del cite="http://internship.opengenus.org" 
         datetime="2020-07-20T22:55:03Z">
        paused its Internship program due to COVID19
    </del> 
    restarted its Internship program.
</p>

CSS with del tag

In HTML, del tag has the following default CSS property already set:

del {
  text-decoration: line-through;
}

del tag supports Global and Event attributes in HTML. For example, we can set the background-color property to red for del tag.

<style>
del {background-color: red;}
</style>

Double Strikethrough in del tag

For Double Strikethrough, we need to set "text-decoration-style" to double for del tag. This makes two lines strikethrough a given text.

This is
<del style="text-decoration-style: double;">
    NOT
</del>
OpenGenus.

Output:

This is NOT OpenGenus.

Try this Strikethrough tool which generates text with strikeout in plain text which you can copy and paste anywhere. Note that you cannot copy the strikeout in HTML directly but can be done using the tool.

With this article at OpenGenus, you must have the complete idea of how to use del tag in HTML.