HTML - <del> Tag

HTML <del> tag is use to mark the deleted textual content on the website. It stands for "deleted text." It represents a range of text that has been deleted from a document. This can be used when rendering "track changes" or source code provides different information. When we use the <del> tag, the browser will usually strike a line through the text that has been deleted.

Note: To find deleted and inserted content in a document, use the <ins> tag with <del>, which will display deleted and inserted text.

Syntax

<del >...</del >

Attribute

HTML del tag supports Global and Event attributes of HTML. Some specific attributes accepted as well which are listed bellow.

Attribute	Values	Description
cite	URL	It defines the URL of the source of the quotation.
datetime	YYYY-MM-DDThh:mm:ssTZD	Hold date and time when the text were deleted.

Examples of HTML del Tag

In these examples we will see the usage of del tag on the text element. We will also decorate our del tag usinf internal CSS.

Strike on Text using del tag

In the following example, we are creating an HTML document and using the <del> tag to strike a line on the unwanted content.

<!DOCTYPE html>
<html>
<body>
   <h2>Example of del tag </h2>
   <p>
      This is tutorialpoint; here learning is easy 
      <del>and difficult</del>, 
      so their caption is easy to learn. 
   </p>
   <p>
      <del>I am deleted paragraph</del>
   </p>
</body>
</html>

Using attribute with del tag

In this example we will used the cite and datetime attribute to mention the source and deleted date of the context.

<!DOCTYPE html>
<html>
<body>
   <h2>Example of del tag </h2>
   <p>
      This is tutorialpoint; here learning is easy 
      <del cite="https://www.tutorialspoint.com/index.htm">and difficult</del>, 
      so their caption is easy to learn. 
   </p>
   <p>
      <del datetime="2024-01-03T12:00:00Z">I am deleted paragraph</del>
   </p>
</body>
</html>

Styling deleted element using CSS

Considering the following example, we use the <del> tag to give a strike line to the unwanted content and use the CSS properties to set the background color of the deleted content.

<!DOCTYPE html>
<html>
<head>
   <style>
      del {
         text-decoration: line-through;
         background-color: #fbb;
         color: #555;
      }

      ins {
         text-decoration: none;
         background-color: #d4fcbc;
      }
   </style>
</head>
<body>
   <p>There is <del>nothing</del>
      <ins>no code</ins> either good or bad, but <del>thinking</del>
      <ins>running it</ins> makes it so.
   </p>
   <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, <del>when an unknown printer took a galley of type and scrambled it to make a type specimen book</del>. </p>
</body>
</html>

Supported Browsers

Tag
del	Yes	Yes	Yes	Yes	Yes

html_tags_reference.htm