HTML <del> Tag

What is the <del> Tag?

The <del> tag is one of those subtle but incredibly useful tools in HTML. It’s like the digital version of crossing out something with a pen to show it’s no longer relevant, but still worth keeping visible. You’ll often see it used for showing corrections, price updates, or even edits in text.

For example, if you’ve ever visited an online store during a sale, you’ve probably seen something like this:
$50 $35.

That’s the <del> tag at work—it lets you show the original price while highlighting the new one.

---

How to Use the <del> Tag

The <del> tag is simple and works right out of the box. Here’s what it looks like in action:

<p>This is a <del>deleted</del> word in a sentence.</p>

When you view this in a browser, it’ll look like this:
This is a deleted word in a sentence.

The strikethrough effect on the word “deleted” is the default styling applied by browsers when you use <del>.

---

When Should You Use <del>?

The <del> tag is perfect for situations where you want to show that something has changed or been removed, while still letting the audience see what was originally there. Here are some common examples:

1. Price Updates
   If you’re showing a sale price, you can strike through the old price to show the discount:htmlCopy code<p>Was: <del>$50.00</del> Now: $35.00</p>
2. Content Corrections
   When updating text, you can use <del> to show the change transparently:htmlCopy code<p>The event will be held on <del>April 10th</del> April 12th.</p>
3. Revisions or Edits
   If you want readers to know that something was updated, <del> makes it clear:htmlCopy code<p>We used to meet every <del>Saturday</del> Sunday for brunch.</p>

---

Styling the <del> Tag

By default, the <del> tag applies a basic strikethrough style, but you can customize it with CSS to make it stand out more or blend in with your design.

Here’s an example:

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

<p>Original Price: <del>$50.00</del> Now: $35.00</p>

This will make the deleted text red and italicized, giving it a more noticeable look.

---

Pairing <del> with <ins>

Sometimes, you might want to not only show what’s been removed but also highlight what’s been added. This is where the <ins> tag comes in handy. The <ins> tag stands for “inserted” and is typically styled with an underline by default.

Here’s an example of how the two tags can work together:

<p>We meet every <del>Saturday</del> <ins>Sunday</ins> for brunch.</p>

In this case, you’re showing that the meeting day has changed from Saturday to Sunday. This makes it crystal clear to your readers what has been updated.

---

Accessibility Benefits of <del>

One of the best things about the <del> tag is that it improves accessibility. Screen readers, which are used by visually impaired users, will announce that the text has been “deleted.” This ensures that everyone, regardless of how they access your content, understands the changes or edits.

---

Browser Support

You don’t need to worry about compatibility—the <del> tag is supported by all major browsers, including Chrome, Firefox, Safari, and Edge. It’s one of those tags that just works everywhere.

---

Final Thoughts

The <del> tag might seem simple, but it’s a powerful way to communicate changes transparently. Whether you’re updating prices, revising text, or showing corrections, <del> adds a layer of clarity and professionalism to your content.

So, the next time you’re building a webpage and need to show edits or updates, give the <del> tag a try. It’s straightforward, intuitive, and incredibly useful.