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 set date and time when the text was deleted using HTML?
When creating web content, it's common to update text by removing outdated or incorrect information. HTML provides semantic elements to mark these changes while preserving a record of when modifications occurred. The del element and time element are the primary methods for tracking text deletions with timestamps.
Syntax
Following is the syntax for marking deleted text with a timestamp
<del datetime="YYYY-MM-DDTHH:MM:SS">deleted content</del>
The datetime attribute follows the ISO 8601 format, which includes date, time, and optionally timezone information.
Following is the syntax for using the time element to display deletion timestamps
<time datetime="YYYY-MM-DDTHH:MM:SS">human-readable date</time>
Using the Del Element with DateTime
The <del> tag semantically marks text as deleted from a document. It renders with a strikethrough effect by default. The datetime attribute specifies exactly when the deletion occurred, which is valuable for content versioning and audit trails.
The datetime value must be a valid date string in ISO 8601 format. This includes date only (2023-03-25), date with time (2023-03-25T14:30:00), or date with time and timezone (2023-03-25T14:30:00-05:00).
Example Basic Del Element
Following example shows how to mark deleted text with a timestamp
<!DOCTYPE html> <html> <head> <title>Del Element with DateTime</title> </head> <body style="font-family: Arial, sans-serif; padding: 20px;"> <h2>Document Revision Example</h2> <p>We are using <del datetime="2023-01-15T10:30:00-05:00">CSS2</del> <ins datetime="2023-01-15T10:30:00-05:00">CSS3</ins> for modern web development.</p> <p>The company was founded in <del datetime="2023-02-20T09:15:00Z">1995</del> <ins datetime="2023-02-20T09:15:00Z">1998</ins>.</p> </body> </html>
The output shows deleted text with strikethrough and inserted text underlined
Document Revision Example We are using CSS2 CSS3 for modern web development. The company was founded in 1995 1998. (CSS2 and 1995 appear with strikethrough, CSS3 and 1998 appear underlined)
Example Multiple Deletions with Different Timestamps
Following example demonstrates tracking multiple deletions made at different times
<!DOCTYPE html>
<html>
<head>
<title>Multiple Deletions Timeline</title>
<style>
.revision {
margin: 10px 0;
padding: 10px;
border-left: 3px solid #ccc;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Article Revision History</h2>
<div class="revision">
<p>Original: "HTML5 is <del datetime="2023-01-10T14:00:00Z">the newest</del>
<ins datetime="2023-01-10T14:00:00Z">a modern</ins> web standard."</p>
</div>
<div class="revision">
<p>Updated: "CSS Grid <del datetime="2023-01-15T16:30:00Z">will be</del>
<ins datetime="2023-01-15T16:30:00Z">is</ins> widely supported."</p>
</div>
</body>
</html>
This creates a clear revision trail showing what was changed and when.
Using the Time Element for Deletion Timestamps
The <time> element represents a specific point in time and can display when content was deleted in a human-readable format. Unlike the del element, the time element doesn't mark text as deleted but provides a semantic way to display deletion timestamps.
Example Time Element for Deletion Record
Following example shows using the time element to record when text was removed
<!DOCTYPE html>
<html>
<head>
<title>Time Element for Deletion Record</title>
<style>
.deletion-log {
background-color: #fff3cd;
border: 1px solid #ffeaa7;
padding: 10px;
margin: 10px 0;
border-radius: 4px;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Content Deletion Log</h2>
<div class="deletion-log">
<p><strong>Deletion Record:</strong> Outdated pricing information removed on
<time datetime="2023-03-20T11:45:00-04:00">March 20, 2023 at 11:45 AM EST</time></p>
</div>
<div class="deletion-log">
<p><strong>Deletion Record:</strong> Deprecated API documentation removed on
<time datetime="2023-03-25T09:00:00Z">March 25, 2023 at 9:00 AM UTC</time></p>
</div>
</body>
</html>
The output displays deletion records with properly formatted timestamps
Content Deletion Log Deletion Record: Outdated pricing information removed on March 20, 2023 at 11:45 AM EST Deletion Record: Deprecated API documentation removed on March 25, 2023 at 9:00 AM UTC
Combining Del and Time Elements
For comprehensive deletion tracking, you can combine both elements. Use del to mark the actual deleted content and time to provide additional context about the deletion.
Example Combined Approach
<!DOCTYPE html>
<html>
<head>
<title>Combined Del and Time Elements</title>
<style>
.edit-info {
font-size: 0.9em;
color: #666;
font-style: italic;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Product Description</h2>
<p>This product supports <del datetime="2023-04-01T12:00:00Z">Internet Explorer 8+</del>
<ins datetime="2023-04-01T12:00:00Z">Chrome 90+ and Firefox 88+</ins> browsers.</p>
<p class="edit-info">Last updated:
<time datetime="2023-04-01T12:00:00Z">April 1, 2023</time></p>
</body>
</html>
This approach provides both semantic markup for the deletion and a clear timestamp for when the change occurred.
DateTime Format Examples
The datetime attribute accepts various ISO 8601 formats for different levels of precision
| Format | Example | Description |
|---|---|---|
| Date only | 2023-03-25 |
Year, month, and day |
| Date and time | 2023-03-25T14:30:00 |
Local date and time |
| Date, time, and timezone | 2023-03-25T14:30:00-05:00 |
With timezone offset |
| UTC time | 2023-03-25T19:30:00Z |
Coordinated Universal Time |
| Year and month | 2023-03 |
Month precision only |
Conclusion
HTML provides semantic methods to track text deletions using the <del> element with its datetime attribute for marking deleted content, and the <time> element for displaying deletion timestamps in human-readable formats. Both elements support ISO 8601 datetime formats and help maintain accurate content revision histories.
245 Views
