When working with web content, there are times when you need to show that something has been removed or deleted, but you still want users to see it for reference. This is common in editing, pricing updates, or content revisions.
In HTML, the <del> tag is used for this purpose.
The <del> tag represents deleted text. Browsers usually display it with a line through the text (strikethrough), making it clear that the content is no longer valid or has been changed.
In this guide, you will learn what the <del> tag is, how it works, when to use it, and how to use it properly in real-world websites.
Understanding the <del> Tag
The <del> tag is an HTML element used to show that text has been removed from a document.
It gives meaning to the content by indicating that the text is no longer current.
Basic Syntax
The <del> tag has an opening and closing tag.
Example:
Anything inside the <del> tag will appear with a strikethrough line.
Example Inside a Paragraph
This shows that the price is no longer valid.
What the <del> Tag Means
The <del> tag does more than just styling.
It tells browsers and search engines:
👉 “This content has been deleted or replaced.”
This makes it a semantic HTML tag, meaning it carries meaning, not just appearance.
Why the <del> Tag Is Important
The <del> tag is useful because it helps:
- Show changes in content
- Maintain transparency
- Keep a history of edits
- Improve clarity for users
Instead of completely removing text, you can show what changed.
Common Use Cases of the <del> Tag
1. Showing Old Prices
One of the most common uses is in pricing.
Example:
This clearly shows the discount.
2. Editing Content
Example:
This shows that “coffee” was replaced with “tea”.
3. Tracking Changes
In documents or blogs, <del> helps show edits.
Example:
This shows the change clearly.
4. Corrections
Example:
This helps learners see the correction.
How Browsers Display the <del> Tag
Browsers apply default styling like this:
This creates the strikethrough effect.
All modern browsers support this tag, including:
- Chrome
- Firefox
- Edge
- Safari
Using <del> with Attributes
The <del> tag supports useful attributes like:
1. datetime
This shows when the text was deleted.
Example:
2. cite
This provides a reference for why the text was removed.
Example:
These attributes are helpful for documentation and tracking changes.
<del> Tag vs <s> Tag
Many beginners confuse <del> with <s>.
<del> Tag
- Shows deleted content
- Has semantic meaning
- Used for edits and updates
<s> Tag
- Shows text that is no longer accurate
- Mostly visual
- Less semantic meaning
Example:
Use <del> when something is actually removed.
<del> Tag vs CSS Strikethrough
You can also create strikethrough using CSS.
Example:
Difference:
<del> | CSS |
|---|---|
| Semantic meaning | Visual only |
| Shows deleted content | Just styling |
Using <del> is better when the deletion has meaning.
Combining <del> with <ins>
The <del> tag is often used with the <ins> tag.
<del>= deleted text<ins>= inserted text
Example:
This clearly shows the update.
Using <del> in Real Websites
Here is a practical example:
This format is common in online stores.
Accessibility and the <del> Tag
The <del> tag is recognized by screen readers.
It helps users understand that content has been removed.
However, for better clarity, it is good to also explain the change in text.
Example:
This makes the meaning clear to all users.
Common Mistakes Beginners Make
1. Using <del> Only for Styling
Some beginners use it just to create a strikethrough look.
That is not the main purpose.
Use CSS if you only want design.
2. Not Explaining the Change
Always provide context.
Bad example:
Better:
3. Overusing the <del> Tag
Too many deletions can confuse users.
Use it only where necessary.
Best Practices for Using the <del> Tag
Use It for Real Deletions
Only use <del> when content is actually removed or changed.
Combine with <ins>
This helps show updates clearly.
Keep It Clear
Always explain what changed.
Use It Sparingly
Do not overload your content with strikethrough text.
Real Example for Beginners
This clearly communicates the change.
Is the <del> Tag Still Used Today?
Yes, the <del> tag is still widely used.
It is especially useful for:
- E-commerce pricing
- Content updates
- Editing documents
- Showing corrections
Even in modern web development, semantic tags like <del> are important.
The <del> tag in HTML is used to show that text has been removed or replaced. It displays text with a strikethrough line, making it clear that the content is no longer valid.
It is commonly used in pricing, edits, corrections, and content updates. Unlike simple styling, the <del> tag provides meaning, helping both users and search engines understand changes in content.
When used properly, the <del> tag improves clarity and transparency in your web pages. It allows you to show what changed instead of hiding it completely.
As you continue learning HTML, understanding tags like <del> will help you create more meaningful and professional websites.