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 human readable date in HTML?
Use the HTML <time> tag to display human-readable dates and times while providing machine-readable datetime information for browsers, search engines, and assistive technologies. The <time> element enhances accessibility and helps with SEO by making temporal content semantically meaningful.
Syntax
Following is the syntax for the HTML <time> tag −
<time datetime="machine-readable-format">Human readable date/time</time>
The datetime attribute is optional but recommended for providing precise machine-readable temporal information.
Attributes
The <time> tag supports the following specific attribute −
| Attribute | Value | Description |
|---|---|---|
| datetime | Valid datetime string | Specifies the machine-readable date/time in ISO 8601 format |
Basic Time Display
Example − Simple Time
Following example shows how to display a simple time using the <time> tag −
<!DOCTYPE html> <html> <head> <title>HTML time Tag</title> </head> <body style="font-family: Arial, sans-serif; padding: 10px;"> <p>The meeting starts at <time>2:30 PM</time> today.</p> <p>Store hours: <time>9:00 AM</time> to <time>6:00 PM</time></p> </body> </html>
The output displays the time in a readable format −
The meeting starts at 2:30 PM today. Store hours: 9:00 AM to 6:00 PM
Using the datetime Attribute
The datetime attribute provides machine-readable temporal information in ISO 8601 format while allowing human-friendly display text. This is particularly useful for dates, times with timezones, and durations.
Example − Date with datetime Attribute
<!DOCTYPE html> <html> <head> <title>Time with datetime Attribute</title> </head> <body style="font-family: Arial, sans-serif; padding: 10px;"> <p>Published on <time datetime="2024-03-15">March 15, 2024</time></p> <p>Last updated: <time datetime="2024-03-15T14:30:00Z">March 15, 2024 at 2:30 PM UTC</time></p> <p>Event date: <time datetime="2024-12-25">Christmas Day</time></p> </body> </html>
The browser displays the human-readable text while using the datetime value for processing −
Published on March 15, 2024 Last updated: March 15, 2024 at 2:30 PM UTC Event date: Christmas Day
Common datetime Formats
The datetime attribute accepts various ISO 8601 formats −
| Format Type | datetime Value | Example |
|---|---|---|
| Date only | YYYY-MM-DD | 2024-03-15 |
| Time only | HH:MM or HH:MM:SS | 14:30 or 14:30:45 |
| Date and time | YYYY-MM-DDTHH:MM | 2024-03-15T14:30 |
| With timezone | YYYY-MM-DDTHH:MM:SSZ | 2024-03-15T14:30:00Z |
| Duration | PnYnMnDTnHnMnS | P1DT2H30M (1 day, 2.5 hours) |
Example − Various datetime Formats
<!DOCTYPE html> <html> <head> <title>Various datetime Formats</title> </head> <body style="font-family: Arial, sans-serif; padding: 10px;"> <h2>Different Time Formats</h2> <p>Date: <time datetime="2024-06-20">June 20th, 2024</time></p> <p>Time: <time datetime="15:45">3:45 in the afternoon</time></p> <p>Full datetime: <time datetime="2024-06-20T15:45:30">June 20, 2024 at 3:45:30 PM</time></p> <p>Duration: <time datetime="PT2H30M">2 hours and 30 minutes</time></p> </body> </html>
Each format serves different purposes while maintaining semantic meaning −
Different Time Formats Date: June 20th, 2024 Time: 3:45 in the afternoon Full datetime: June 20, 2024 at 3:45:30 PM Duration: 2 hours and 30 minutes
Practical Use Cases
Example − Blog Post Metadata
Following example shows how to use <time> elements in a blog post context −
<!DOCTYPE html>
<html>
<head>
<title>Blog Post with Time Elements</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px; max-width: 600px;">
<article>
<h1>Understanding HTML5 Semantic Elements</h1>
<p>Published <time datetime="2024-03-15T09:00:00-05:00">March 15, 2024 at 9:00 AM EST</time></p>
<p>Last modified <time datetime="2024-03-16T14:30:00-05:00">March 16, 2024</time></p>
<p>Reading time: approximately <time datetime="PT8M">8 minutes</time></p>
<p>Content goes here...</p>
</article>
</body>
</html>
This provides structured temporal information for search engines and screen readers −
Understanding HTML5 Semantic Elements Published March 15, 2024 at 9:00 AM EST Last modified March 16, 2024 Reading time: approximately 8 minutes Content goes here...
Browser Compatibility
The HTML <time> element is supported by all modern browsers including Chrome, Firefox, Safari, Edge, and Internet Explorer 9+. The element provides semantic meaning even in older browsers, displaying the content normally while newer browsers and assistive technologies can utilize the datetime attribute.
Conclusion
The HTML <time> element provides semantic meaning to temporal content by combining human-readable display text with machine-readable datetime values. Use the datetime attribute with ISO 8601 formats to enhance SEO, accessibility, and enable better processing by browsers and search engines.
626 Views
