The <del> tag is used to represent text that has been deleted from a document. It’s often rendered with a strikethrough (line through the text) in browsers.
It’s especially useful for:
- Showing edits or revisions
- Indicating removed prices or outdated info
- Semantic meaning in version-controlled or collaborative documents
✅ Basic Syntax
<p>The price was <del>$50.00</del> now it's <ins>$35.00</ins>.</p>
📍 Result:
The original price ($50.00) will appear crossed out, and the new price will be underlined.
🧩 Paired with <ins> (Inserted Content)
For edits, use <del> for what was removed and <ins> for what was added:
<p>This product is <del>unavailable</del> <ins>now in stock</ins>.</p>
🎨 Styling Example
You can style it with CSS for a custom look:
<style>
del {
color: red;
text-decoration: line-through;
}
ins {
color: green;
text-decoration: underline;
}
</style>
🧠 Optional Attributes
| Attribute | Description |
|---|---|
cite | URL to explain why the change was made |
datetime | When the deletion occurred (ISO format) |
Example:
<del cite="https://example.com/edit-log" datetime="2025-06-01T10:00:00Z">
Old company policy
</del>
✅ Summary
| Tag | <del> |
|---|---|
| Purpose | Marks deleted/removed text |
| Default Style | Strikethrough text |
| Optional | cite, datetime for extra info |
| Common Pair | <ins> for added content |