Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to display deleted text in HTML?
The <del> tag in HTML is used to display deleted text by marking it with a strikethrough. This semantic element indicates that the content has been removed from the document but is kept visible to show revision history or changes made to the content.
Syntax
Following is the syntax for the <del> tag −
<del cite="URL" datetime="YYYY-MM-DDTHH:MM:SS">Deleted text</del>
Attributes
The <del> tag supports the following specific attributes −
| Attribute | Value | Description |
|---|---|---|
| cite | URL | Specifies a URL to a document that explains why the text was deleted. |
| datetime | YYYY-MM-DDTHH:MM:SS | Defines the date and time when the text was deleted in ISO 8601 format. |
Both attributes are optional. The <del> tag also supports all global HTML attributes like id, class, and style.
Basic Usage Example
Following example demonstrates how to use the <del> tag to show deleted text −
<!DOCTYPE html> <html> <head> <title>HTML del Tag</title> </head> <body style="font-family: Arial, sans-serif; padding: 20px;"> <h2>Document Revision Example</h2> <p>The following text is deleted using <del>HTML del tag</del> to show changes.</p> <p>Original price: <del>$99.99</del> Now: $79.99</p> </body> </html>
The output shows the deleted text with a strikethrough line −
Document Revision Example The following text is deleted using HTML del tag to show changes. Original price: $99.99 Now: $79.99
Using Del with Ins Tag
The <del> tag is often paired with the <ins> tag to show text that has been replaced. This combination is useful for displaying document revisions and changes.
Example
<!DOCTYPE html> <html> <head> <title>Del and Ins Tags</title> </head> <body style="font-family: Arial, sans-serif; padding: 20px;"> <h2>Product Information Updates</h2> <p>Product Name: <del>Basic Plan</del> <ins>Premium Plan</ins></p> <p>Price: <del>$29/month</del> <ins>$49/month</ins></p> <p>Features: <del>5GB storage</del> <ins>50GB storage</ins></p> </body> </html>
The output clearly shows the old values (strikethrough) and new values (underlined) −
Product Information Updates Product Name: Basic Plan Premium Plan Price: $29/month $49/month Features: 5GB storage 50GB storage
Using Cite and Datetime Attributes
The optional attributes provide additional context about the deletion, useful for content management systems and accessibility tools.
Example
<!DOCTYPE html>
<html>
<head>
<title>Del with Attributes</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Article Revision History</h2>
<p>Published: March 15, 2024</p>
<p>
<del cite="https://example.com/revision-log.html" datetime="2024-03-20T14:30:00">
This paragraph was removed due to outdated information.
</del>
</p>
<p>The article has been updated with current data.</p>
</body>
</html>
The deleted text appears with strikethrough, and the attributes provide metadata about when and why the deletion occurred −
Article Revision History Published: March 15, 2024 This paragraph was removed due to outdated information. The article has been updated with current data.
Styling Deleted Text
You can customize the appearance of deleted text using CSS. By default, browsers apply a text-decoration: line-through style.
Example
<!DOCTYPE html>
<html>
<head>
<title>Styling Del Tag</title>
<style>
.custom-deleted {
text-decoration: line-through;
color: red;
background-color: #ffe6e6;
padding: 2px 4px;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Custom Styled Deleted Text</h2>
<p>Default deleted text: <del>This is deleted</del></p>
<p>Custom styled: <del class="custom-deleted">This is custom deleted text</del></p>
</body>
</html>
The output shows different styling approaches for deleted text −
Custom Styled Deleted Text Default deleted text: This is deleted Custom styled: This is custom deleted text (red text with light red background)
Accessibility and Semantic Meaning
The <del> tag provides semantic meaning that screen readers and other assistive technologies can interpret. It announces deleted content to users, making document changes accessible to everyone.
For better accessibility, consider adding context about why content was deleted using the cite attribute or surrounding explanatory text.
Conclusion
The <del> tag is essential for showing deleted or outdated content while maintaining document history. It works best when paired with the <ins> tag to show replacements, and its optional cite and datetime attributes provide valuable context for content revisions.
446 Views
