The datetime attribute in HTML provides a machine-readable datetime format for certain elements such as <time>, <ins>, and <del>.
Definition and Usage
➔ It has no visual effect on the page, but it improves semantics for search engines and screen readers.
➔ The value of the datetime attribute must be a valid date/time string.
➔ The common format is YYYY-MM-DDThh:mm:ssZ. (YYYY for year, MM for month, hh for hour, mm for minute, ss for second).
➔ Note: T is a separator between date and time (required) and Z (Zulu) is the Time Zone Designator (optional).
Syntax
//In HTML
<p>I have a meeting on <time datetime="2025-01-05">January 05, 2025</time>.</p>
<p><ins id="sample" datetime="2025-08-09T10:11:12Z">This text is inserted.</ins></p>
<p><del datetime="2025-08-09T10:11:12Z">This text is deleted.</del></p>
//In Javascript
<script>
// This anonymous function runs as soon as it's encountered.
(() => {
let element = document.getElementById("sample");
element.datetime = "2025-08-09T10:11:12Z";
element.setAttribute('datetime', '2025-08-09T10:11:12Z');
})();
</script>
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML datetime attribute example</title>
<meta charset="utf-8" />
</head>
<body>
<h3>HTML datetime attribute example</h3>
<p>The datetime attribute provides a machine-readable datetime format for a specified elements.</p>
<p>I have a meeting on <time datetime="2025-01-05">January 05, 2025</time>.</p>
<p><ins id="sample" datetime="2025-08-09T10:11:12Z">This text is inserted.</ins></p>
<p><del datetime="2025-08-09T10:11:12Z">This text is deleted.</del></p>
<script>
// This anonymous function runs as soon as it's encountered.
(() => {
//let element = document.getElementById("sample");
//element.datetime = "2025-08-09T10:11:12Z";
//element.setAttribute('datetime', '2025-08-09T10:11:12Z');
})();
</script>
</body>
</html
Click on the "Try it Now" button to see how it works.