Learn how to semantically mark text as deleted using the <del> element, ensuring accessibility and proper styling for removed content.
What it is
The <del> HTML element represents a range of text that has been deleted from a document. This can be used when rendering "online" edit controls, version control systems, or publishing systems with preview functionality where the difference between the current state and the previous state is shown. Unlike simple CSS strikethroughs, <del> provides semantic meaning, allowing assistive technologies to announce the change appropriately.
Related terms include <ins> (for inserted text) and <s> (for no longer accurate information, not necessarily deleted).
Why it matters
- Semantic Clarity: It tells browsers and screen readers exactly what changed, rather than just how it looks.
- Accessibility: Screen readers can announce "deleted text," helping users understand context in revision histories.
- Default Styling: Browsers automatically apply a strikethrough style, reducing the need for custom CSS.
- Metadata Support: Attributes like
citeanddatetimeallow you to link to external references or timestamps for audit trails.
Syntax or steps
The basic syntax wraps the removed text within opening and closing tags. You can optionally add attributes to provide more context.
<del cite="URL" datetime="YYYY-MM-DD">Removed Text</del>cite: A URL pointing to a resource explaining why the text was removed.datetime: The date and time the text was removed, formatted according to ISO 8601.
Example
Here is a realistic example showing a price update on an e-commerce page.
<p>
Current Price: <strong>$49.99</strong>
<br>
Previous Price: <del cite="/changelog/price-update-2023.md" datetime="2023-10-27T14:30:00Z">$59.99</del>
</p>Part-by-part explanation:
- The
<p>tag contains the paragraph structure. <strong>highlights the current active price.<del>wraps the old price "$59.99".citelinks to a markdown file explaining the price drop.datetimerecords the exact moment the change occurred.
Common mistakes
- Using
<s>instead of<del>: Use<s>only if the information is no longer accurate but wasn't technically "removed" from a draft (e.g., outdated facts). Use<del>for edits. - Ignoring Accessibility: If you remove the default strikethrough via CSS without adding visual cues or ARIA labels, users may miss the change.
- Invalid Datetime Format: Ensure
datetimefollows ISO 8601 (e.g.,2023-10-27). Incorrect formats are ignored by validators. - Nesting Issues: Do not nest
<del>inside another<del>unless representing multiple layers of history, which is rarely supported well by browsers.
When to use it
Compare <del> with similar elements to choose the right tool.
| Element | Use Case | Visual Default |
|---|---|---|
<del> |
Text removed during editing or revision. | Strikethrough |
<s> |
No longer relevant or accurate (not necessarily edited out). | Strikethrough |
CSS text-decoration: line-through |
Stylistic choice only; no semantic meaning. | Strikethrough |
Practice
Guided Exercise: Create a list item showing a task that was completed and then cancelled. Mark the task name as deleted with a timestamp.
Challenge: Add a cite attribute linking to a hypothetical ticket number (e.g., /tickets/101) and verify the output renders with a strikethrough.
Hint: Check your browser's developer tools to see if the del element is recognized and styled correctly.
Quick check
Question: Which attribute allows you to specify the exact time the text was deleted?
Answer: The datetime attribute.
Summary
The <del> element is essential for creating accessible, semantic revision histories in HTML. By combining it with cite and datetime, you provide both visual clarity and machine-readable context for changes.