Live Preview
A sentence with removed text:
Our website will be updated soon updated next week.
HTML <del> Tag
Overview
What You’ll Learn
By the end of this tutorial, you’ll mark deleted text semantically with <del> and track document revisions correctly.
del Syntax
Wrap removed text in opening and closing <del> tags.
Semantic Meaning
Signal text deleted from the document—not just decoration.
cite Attribute
Link to a changelog or explanation for the deletion.
datetime Attribute
Record when the deletion occurred in ISO 8601 format.
del vs ins vs s
Choose the right tag for edits vs outdated content.
CSS Styling
Enhance deleted and inserted text with custom styles.
Fundamentals
What Is the <del> Tag?
The del element (<del>) represents content that was deleted from the document. Browsers display it with a strikethrough, but the tag carries semantic meaning—it is for edits and revisions, not just decoration.
Not the same as <s>
<del> means text was removed during editing. <s> means content is no longer accurate or relevant but was not necessarily deleted from the source.
Common uses include document revisions, editorial corrections, changelog entries, corrected announcements, and any content where readers should see what was removed.
Foundation
📝 Syntax
Wrap removed text between opening and closing del tags:
syntax.html
<del>Deleted text here</del>Syntax Rules
<del>is an inline element—it nests inside paragraphs and headings.- Use it when text was removed from the document, not merely outdated.
- Pair with
<ins>when showing both old and new wording. - Do not use
delas a generic strikethrough style—usesor CSS when semantics differ.
Cheat Sheet
⚡ Quick Reference
| Feature | Syntax / Rule | Notes |
|---|---|---|
| cite | cite="URL" | Explains why text was deleted |
| datetime | datetime="ISO 8601" | When the deletion occurred |
| Default style | Strikethrough | text-decoration: line-through |
| Pairs with | <ins> | Show insertions alongside deletions |
| Not the same as | <s> | s = no longer relevant |
| Use cases | Revisions, edits | Changelogs, corrections |
Comparison
⚖️ <del>, <ins>, and <s>
These tags all affect text appearance but carry different meanings:
| Tag | Meaning | When to use |
|---|---|---|
<del> | Deleted from document | Editorial revisions, removed text |
<ins> | Inserted into document | New text added during an edit |
<s> | No longer accurate | Outdated sale prices, struck content |
<strike> | Obsolete tag | Use s or del instead |
Reference
🧰 Attributes
The <del> tag supports cite and datetime for machine-readable edit metadata:
cite OptionalURL to a document explaining why the text was deleted.
cite="https://..."datetime OptionalISO 8601 date or date-time when the deletion occurred.
datetime="2026-06-01"class GlobalCSS hook for custom deleted-text styling.
class="removed"id GlobalUnique identifier for linking or scripting.
id="edit-1"title GlobalTooltip explaining the deletion to users on hover.
title="Removed in v2"Visibility Hiddencite and datetime are not shown on the page by default.
Metadata onlyExample: <del cite="https://example.com/changelog" datetime="2026-06-01T10:00:00Z">old price</del>
Hands-On
Examples Gallery
Basic deletions, cite revisions, del + ins edits, and datetime price changes with copy-ready code and live previews.
Basic Deleted Text
Mark removed words inside a sentence.
basic-del.html
<p>
Our website will be
<del>updated soon</del>
updated next week.
</p>📚 Common Use Cases
Use <del> for document revisions, editorial corrections, changelog entries, corrected announcements, and any content where readers should see what was removed.
Document Revisions with cite
Link to a changelog or explanation for why text was removed.
document-revisions.html
<p>
In version 2.0, we
<del cite="https://example.com/changelog-v2">deprecated</del>
removed support for legacy features.
</p>Editorial Changes with ins
Pair del with ins to show both the old and new wording.
editorial-changes.html
<p>
The original plan was
<del>postponed</del>
<ins>re-evaluated</ins>
due to unforeseen circumstances.
</p>Price Change with datetime
Record when old content was removed using the datetime attribute.
datetime-del.html
<p>
Ticket price:
<del datetime="2026-06-01T10:00:00Z">$49</del>
$39
</p>Design
Styling <del> with CSS
Browsers apply strikethrough by default. Enhance deleted and inserted text with color and background for clearer revision tracking:
text-decoration Default line-throughcolor Red for deletionsbackground Highlight edit blocksins pairing Green for insertions del-styles.css
/* Deleted text styling */
del {
color: #991b1b;
text-decoration: line-through;
}
del.edit-removed {
background: #fef2f2;
padding: 0.1rem 0.25rem;
}
ins.edit-added {
color: #166534;
background: #f0fdf4;
text-decoration: none;
border-bottom: 2px solid #22c55e;
}Live styled revision tracking
Status: pending approved
A11y
♿ Accessibility
Semantic edit markup helps all readers understand changes:
- Use del for real deletions — not as a generic strikethrough style.
- Pair with ins when text was replaced — show both removed and added content.
- Screen readers may announce deletions — write clear surrounding context.
- Style with CSS if needed — color or background can reinforce meaning visually.
🧠 How <del> Works
1
Author wraps removed text
Place deleted words inside del tags.
Markup
2
Browser applies strikethrough
Default user-agent CSS adds text-decoration: line-through.
Render
3
Optional metadata added
cite and datetime document why and when.
Metadata
=
Clear revision history
Readers see what changed—with meaning, not just decoration.
Compatibility
Universal Browser Support
The <del> element is fully supported in all modern browsers and legacy Internet Explorer.
Baseline · Since HTML 4
Deleted text that works everywhere
From legacy Internet Explorer to the latest mobile browsers — the del element is fully supported for semantic revision tracking.
100% Core tag support
Google Chrome All versions · Desktop & Mobile
Full supportMozilla Firefox All versions · Desktop & Mobile
Full supportApple Safari All versions · macOS & iOS
Full supportMicrosoft Edge All versions · Chromium & Legacy
Full supportInternet Explorer IE 6+ · Legacy environments
Full supportOpera All modern versions
Full support<del> tag 100% supported
Bottom line: Ship semantic deleted text with confidence. The <del> element is safe to use in every production environment today.
Wrap Up
Conclusion
The <del> tag marks text removed from a document. Combined with ins, cite, and datetime, it creates clear, semantic revision tracking—use it for edits, not just strikethrough styling.
Pro Tips
💡 Best Practices
✅ Do
- Use
delfor removed document text - Pair with
inswhen showing replacements - Add
citeanddatetimewhen useful - Style edits with CSS for clarity
❌ Don’t
- Use
delonly for visual strikethrough - Confuse
delwithsorstrike - Hide important corrections from screen readers
- Rely on CSS alone when semantics matter
Summary
Key Takeaways
Knowledge Unlocked
Six truths every developer should know about <del>
Bookmark these before you ship — they’ll keep your revision markup semantic and accessible.
6
Core concepts 01
Deleted Content
<del> marks text removed from the document.
02
Default Strikethrough
Browsers apply line-through via user-agent styles.
Render 03
Pair with ins
Show both removed and added text for edits.
Pattern 04
cite Attribute
Link to a changelog or explanation for the deletion.
Metadata 05
datetime Attribute
Record when content was removed in ISO 8601 format.
Metadata 06
Not the Same as s
del = removed; s = no longer relevant.
❓ Frequently Asked Questions
It marks text that was removed from the document. Browsers show a strikethrough, but the meaning is semantic—deleted content—not just decoration.
del means text was deleted during editing. s means content is no longer accurate or relevant but was not necessarily removed from the source.Yes. Use
del for removed text and ins for newly added text when showing document revisions.cite links to a document explaining the deletion. datetime records when it happened in ISO 8601 format.No.
strike is obsolete. Use del for removed text or s for no-longer-relevant content.Track Document Changes
Practice del, ins, and edit attributes in the interactive HTML editor.
About the author
6 people found this page helpful