HTML del Tag: How to Mark Deleted Text in Pages

The HTML del tag shows text that a user or author removed from a page. A browser shows this text with a line through it so readers see the old version. Writers use it in articles or notes.

Understand the HTML <del> Tag

The <del> tag is an inline element that marks text as removed. A line runs through the words so users notice what got deleted.

Here is the basic tag:

<p>This is <del>old</del> text.</p>

A browser will show the word “old” with a line through it inside the sentence.

The <del> tag helps readers see that a change took place in a document. A user can track edits or know that some detail no longer applies.

Hence, it is often used in online articles, tutorials, or notes where updates happen over time.

Here is a quick example:

<p>Price was <del>$50</del> now $40</p>

The tag makes it easy for users to notice that the old value no longer applies.

How to Style th <del> Tag with CSS

By default, the browser adds a line through deleted text. A developer can use CSS to change the look. For example, you can change the color, style, or add extra effect.

For example:

<style>
del {
  color: red;
  text-decoration: line-through;
}
</style>

<p>Old plan cost <del>$25</del> now $15</p>

This style makes the deleted words show in red with a strike line.

The Differences Between HTML <del> and <ins> Tags

The <del> tag shows text that got removed while the <ins> tag shows text that got added.

Writers can use both tags in a document to show edits. For example, a blog post may use <del> for old prices and <ins> for new prices.

All major browsers support the <del> tag. Chrome, Firefox, Safari, Edge, and Opera show the line through the words without extra setup. Old browser versions may show it the same way since support for <del> has existed for years.

Examples of <del> Tag in HTML

Basic Price Update:

<p>Book cost <del>$30</del> now $20</p>

This code shows the old cost of a book with a line through it and the new cost after it. A user notices both values in one view and sees the change with ease.

Change in Task List:

<ul>
  <li><del>Buy milk</del></li>
  <li>Call John</li>
  <li>Finish report</li>
</ul>

This code shows a task list where one task has a line through it. The list lets a user track what task is done and what task remains open.

Use with <ins> for Document Update:

<p>Our site was <del>www.oldsite.com</del> <ins>www.newsite.com</ins></p>

This code shows both removed and added text in one line. The old domain has a line through it while the new one shows with an underline to mark the update.

Style for Better Display:

<style>
del {
  color: gray;
  font-style: italic;
}
</style>

<p>Old rule was <del>No outside food</del> now food is allowed</p>

This code changes the look of the <del> tag with gray and italic text. A user sees that the old rule no longer applies while the new rule remains easy to read.

Wrapping Up

You learned what the <del> tag is and how it works on web pages.

Here is a quick recap:

• <del> shows text that got removed from a page.
• You can style the tag with CSS to change its look.
• <del> and <ins> work together on edits.
• All major browsers support the <del> tag.

FAQs

<p>This is <del>old text</del> in a sentence.</p>

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

Similar Reads