Welcome to Vanilla Breeze
This bell pulls live notifications from /go/notify/messages — the same contract documented at /docs/concepts/service-contracts/. Static articles like this one are the no-JS / no-backend fallback.
del
The del element represents text that has been deleted from a document, typically displayed with a strikethrough and red background tint for tracking edits or showing revisions.
Description
The <del> element indicates text that has been removed from a document. It is semantically meaningful for document revision tracking, edit histories, and showing changes over time. VB styles it with a red line-through and a subtle red background tint so deletions are visually distinct from <s> strikethroughs.
The element can optionally include cite and datetime attributes to provide machine-readable context about the deletion.
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 is no longer relevant but was not editorially deleted - Price reductions: Use
<s>unless you are tracking actual revision history
Examples
Default
Displays with a red strikethrough and subtle red background indicating deletion.
Basic del element
<del>This content has been deleted.</del>.diff
Enhanced styling for diff displays with padding and rounded corners, ideal for code comparisons.
Diff styling variant
<del class="diff">removed code</del>Document Revision
Pair <del> with <ins> to show before-and-after edits in running text.
Revision with del + ins
<p>The meeting will be held on <del>Tuesday</del> <ins>Wednesday</ins> at 2pm.</p>Code Diff Display
Use the .diff class on both <del> and <ins> for compact, pill-shaped diff lines.
Code diff with .diff class
<pre><code><del class="diff">const oldVariable = "deprecated";</del><ins class="diff">const newVariable = "current";</ins></code></pre>Block-Level Deletion
The <del> element can wrap block content for multi-paragraph deletions.
Block-level del
<del> <p>This entire paragraph has been removed from the document.</p> <p>Multiple paragraphs can be deleted together.</p></del>Key Attributes
| Attribute | Description | Example |
|---|---|---|
datetime |
Date and time of the deletion in ISO 8601 format. Not visible to users but available to scripts and assistive technology. | datetime="2024-01-15T10:30:00" |
cite |
URL to a document explaining the change. Not rendered by the browser but useful for audit trails. | cite="https://example.com/changelog" |
Del with datetime attribute
<del datetime="2024-01-15T10:30:00">Original content</del>Del with cite attribute
<del cite="https://example.com/changelog#v2">Legacy API endpoint</del>del vs s
Both elements produce a strikethrough, but they carry different semantics and VB gives them different visual treatments to match:
| Element | Meaning | VB Styling |
|---|---|---|
<del> |
Editorial change — text was removed from the document | Red strikethrough + red background tint |
<s> |
No longer accurate/relevant — not an edit | Muted strikethrough only (no background) |
Use <del> when the content was editorially removed (contracts, changelogs, diffs). Use <s> for prices, expired offers, or outdated info.
CSS Reference
del CSS
del { text-decoration: line-through; background: oklch(55% 0.2 25 / 0.1); text-decoration-color: oklch(55% 0.2 25);} del.diff { display: inline-block; padding-inline: var(--size-2xs); border-radius: var(--radius-s);}The red background at 10% opacity provides a subtle tint that works across light and dark themes. The .diff variant adds inline-block display with padding for pill-shaped diff tokens.
Accessibility
- Screen reader announcement: Most screen readers announce "deletion" before reading deleted content and "end deletion" after
- Dual visual cues: Strikethrough and background color together ensure visibility, including for users who may not perceive color
- Don't hide important info: Ensure any still-visible deleted content remains accessible
- Datetime attribute: Provides machine-readable context about when changes occurred
Screen Reader Behavior
With proper screen reader settings, users will hear something like:
Screen reader announcement
"deletion, This content has been deleted, end deletion"Related
<ins>— Companion element for inserted text (use together for document revisions)<s>— Strikethrough for content that is no longer accurate, without editorial semantics<u>— Wavy red underline for annotations (see VB underline styles comparison)<mark>— Highlighted text for reference (background tint without strikethrough)