The HTML <del> element is used to show deleted text. This tag explicitly defines content that has been removed or deleted from a document, signaling a revision or change.
Understanding the <del> Element
The <del> tag defines text that has been deleted from a document. This is a semantic HTML element, meaning it conveys meaning about the content it encloses, indicating that the enclosed text is no longer part of the current or valid version of the document.
Browsers will usually strike a line through deleted text, making it visually distinct and immediately recognizable to users that the text is no longer considered current or correct.
How Browsers Render Deleted Text
By default, most web browsers apply a strikethrough style to content wrapped in the <del> tag. This visual cue helps users quickly identify changes or corrections within a document.
Example:
Consider the following HTML code:
<p>The original price was <del>$20.00</del> now it's only $15.00!</p>This would typically render as:
The original price was $20.00 now it's only $15.00!
Attributes for Enhanced Context
The <del> element supports several attributes that provide additional context about the deletion:
cite: This attribute can point to a URL of a document that explains the reason for the deletion. It provides a reference for auditing or understanding the change.datetime: This attribute specifies the date and time when the text was deleted. The value must be a valid date and time string following specific formats (e.g.,YYYY-MM-DDThh:mm:ssZ).
Example with attributes:
<p>The conference will be held on <del datetime="2023-01-15T10:00:00Z" cite="https://example.com/revision-log">January 15th</del> January 20th.</p>Semantic Value and Best Practices
Using <del> is crucial for several reasons:
- Accessibility: Screen readers and other assistive technologies can interpret the semantic meaning of
<del>, conveying to users with visual impairments that the text has been deleted. - Search Engine Optimization (SEO): Search engines can better understand the content structure and revisions, potentially helping in how updated content is indexed.
- Maintainability: It clearly marks changes in source code, making it easier for developers to understand the evolution of the document.
For marking revisions, <del> is often paired with the <ins> element, which signifies inserted text. Together, they offer a powerful way to highlight document modifications.
del vs. s Element
While both <del> and <s> elements visually strike through text, their semantic meanings differ:
| HTML Element | Purpose | Semantic Meaning |
|---|---|---|
<del> |
Represents content deleted from a document | The text was removed during a revision. |
<s> |
Represents content that is no longer accurate | The text is no longer correct or relevant, but not formally "deleted." |
For instance, if a product is out of stock, you might use <s> for its old price (<s>$10</s>). If you're showing a revision where text was actually removed from a document (e.g., in a legal document or an article edit), <del> is the appropriate choice.
Styling Deleted Text
While browsers provide a default strikethrough, you can customize the appearance of deleted text using CSS. This allows you to match the styling with your website's design.
del {
color: #cc0000; /* Red color for deleted text */
text-decoration: line-through; /* Ensure strikethrough */
font-style: italic; /* Add italic style */
}By leveraging the <del> element, web developers can clearly and semantically indicate changes in their content, enhancing both user experience and document clarity.
