del
The del element represents text that has been deleted from a document, typically displayed with a strikethrough and used for tracking edits or showing revisions.
Description
The <del> element indicates text that has been removed from a document. It's semantically meaningful for document revision tracking, edit histories, and showing changes over time. The element can optionally include cite and datetime attributes to provide context about the deletion.
Semantic Meaning
The del element carries specific semantic meaning:
- Indicates content that has been removed from the document
- Screen readers typically announce "deletion" before the content
- Can include metadata about when and why the deletion occurred
- Paired with
<ins>for showing document revisions
When to Use
- Document revisions: Track changes in legal documents, contracts, or policies
- Edit history: Show what was changed in collaborative documents
- Diff displays: Show removed code or text in version comparisons
- Corrections: Indicate corrected information while preserving the original
- Track changes: Similar to "track changes" in word processors
When NOT to Use
- Visual strikethrough only: Use
<s>for content that's no longer relevant but wasn't deleted - Price reductions: Consider
<s>unless tracking actual price change history
Variants
Default
Displays with strikethrough and a subtle red background indicating deletion.
This content has been deleted.
.diff
Enhanced styling for diff displays with padding and rounded corners.
removed code
Live Examples
Document Revision
The meeting will be held on Tuesday Wednesday at 2pm.
With Timestamp
Original content that was removed
Deleted on January 15, 2024
With Citation
Legacy API endpoint
Code Diff Display
const oldVariable = "deprecated";
const newVariable = "current";Contract Amendment
The service fee shall be $50 $45 per month, effective immediately.
Block-Level Deletion
The <del> element can wrap block content when used as a block element.
This entire paragraph has been removed from the document.
Multiple paragraphs can be deleted together.
Key Attributes
| Attribute | Description |
|---|---|
cite |
URL to a document explaining the change |
datetime |
Date and time of the deletion (ISO 8601 format) |
CSS Properties
| Property | Value |
|---|---|
text-decoration |
line-through |
background |
oklch(55% 0.2 25 / 0.1) (subtle red) |
text-decoration-color |
oklch(55% 0.2 25) (red) |
.diff Variant
| Property | Value |
|---|---|
display |
inline-block |
padding-inline |
var(--size-2xs) |
border-radius |
var(--radius-s) |
Accessibility
- Screen reader announcement: Most screen readers announce "deletion" before reading deleted content
- Visual indication: Strikethrough and background color provide visual cues
- Don't hide important info: Ensure deleted content that's still visible is accessible
- Datetime attribute: Helps users understand when changes occurred
Screen Reader Behavior
With proper screen reader settings, users will hear something like: