HTML - <del> Tag

Quiz

The HTML <del> tag stands for "deleted text" and is used to mark text that has been removed from a document. This tag is useful for rendering "track changes" or when source code provides different information. When the <del> tag is used, the browser typically strikes a line through the deleted text.

Note: To identify deleted and inserted content in a document, use the <ins> tag with <del>. This combination will display both the deleted and inserted text.

Syntax

Following is the syntax of the HTML <del> tag −

<del >...</del >

Attributes

The HTML <del> tag supports both Global and Event attributes. Additionally, it accepts some specific attributes, which are listed bellow.

Attribute	Values & Description
cite	URL It specifies the URL of the quotation's source.
datetime	YYYY-MM-DDThh:mm:ssTZD Record the date time when the text was deleted.

In these examples we will demonstrate the usage of <del> tag on text elements. Additionally, we will style our <del> tag using internal CSS.

Example: Strike on Text

In the following example, we create an HTML document and use the <del> tag to strike through unwanted content. When we run the code, it generates an output displaying the text with a strike-through effect applied to the content within the <del> tag.

<!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>

Example: "cite" & "datetime" Attributes with <del> tag

In this example, we use the cite and datetime attributes to specify the source and deletion date of the context. The HTML example demonstrates the <del> tag, which strikes through text to indicate deletions, using optional and datetime attributes.

<!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>

Example: Styling Deleted Element

Here, we use the <del> tag to strike through unwanted content and apply CSS properties to set the background color of the deleted text. When we run the code, the output shows the deleted content with a light red background and a strikethrough line, while the inserted content appears with a light green background.

<!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

Print Page