Thẻ <time> biểu diễn ngày/giờ máy đọc được (machine-readable) qua attribute datetime.
Thuộc tính datetime
| Định dạng | Ví dụ | Mô tả |
|---|---|---|
| Ngày | 2024-12-25 | YYYY-MM-DD |
| Giờ | 14:30 | HH:MM (24h) hoặc HH:MM:SS |
| Ngày giờ | 2024-12-25T14:30 | ISO 8601 local |
| Ngày giờ UTC | 2024-12-25T14:30Z | ISO 8601 UTC (Z = Zulu) |
| Ngày giờ có timezone | 2024-12-25T14:30+07:00 | ISO 8601 với offset |
| Tuần | 2024-W52 | Năm-tuần |
| Thời gian | PT2H30M | Duration (ISO 8601) |
Ví dụ
<!DOCTYPE html>
<html>
<head>
<title>HTML time Tag</title>
<style>
body { font-family: 'Segoe UI', sans-serif; padding: 20px; font-size: 1.1rem; }
time { background: #e3f2fd; padding: 2px 6px; border-radius: 4px; }
time::after { content: attr(datetime); font-size: 0.8em; color: #666; margin-left: 8px; font-family: monospace; }
</style>
</head>
<body>
<h1>Thẻ <time> - Ngày Giờ Máy Đọc Được</h1>
<p>Sinh nhật: <time datetime="2000-05-15">15/05/2000</time></p>
<p>Cuộc họp: <time datetime="2024-12-25T14:30+07:00">25/12/2024 lúc 14:30</time></p>
<p>Sự kiện UTC: <time datetime="2024-12-25T07:30Z">25/12/2024 07:30 UTC</time></p>
<p>Thời lượng phim: <time datetime="PT2H15M">2 giờ 15 phút</time></p>
<p>Tuần lễ: <time datetime="2024-W52">Tuần 52 năm 2024</time></p>
<p>Giờ hiện tại: <time datetime="08:30">08:30 AM</time></p>
</body>
</html>
Kết quả
Ngày giờ hiển thị thân thiện cho người dùng, attribute datetime cung cấp định dạng chuẩn cho máy tính/search engine/accessibility.
SEO & Accessibility
- Google hiểu datetime cho rich snippets (Event, Article...)
- Screen reader đọc datetime chuẩn thay vì text tùy ý
- Microdata:
<time itemprop="startDate" datetime="...">