แท็ก <time> ใช้สำหรับแสดงวันที่และ/หรือเวลาในรูปแบบที่มนุษย์อ่านง่าย และเครื่องจักร (Search engines, Screen readers) สามารถแปรรูปได้ผ่านแอตทริบิวต์ datetime
แอตทริบิวต์ datetime
| แอตทริบิวต์ | รูปแบบ | ตัวอย่าง |
|---|---|---|
| datetime | ISO 8601 | 2024-01-15, 14:30, 2024-01-15T14:30:00+07:00, PT2H30M (Duration) |
ตัวอย่างการใช้งาน
<!DOCTYPE html>
<html>
<head>
<title>ตัวอย่าง HTML time Tag</title>
</head>
<body>
<p>เวลาตอนนี้คือ <time datetime="18:16">18:16 น.</time></p>
<p>งานประชุมวัน <time datetime="2024-12-25">25 ธันวาคม 2567</time></p>
<p>เริ่ม <time datetime="09:00">09:00</time> จน <time datetime="17:00">17:00</time></p>
<p>ระยะเวลา: <time datetime="PT2H30M">2 ชั่วโมง 30 นาที</time></p>
</body>
</html>ประโยชน์
- SEO: Search engines เข้าใจวันที่/เวลาได้แม่นยำ (Rich Snippets)
- Accessibility: Screen readers อ่านออกเสียงได้ถูกต้อง
- Microdata: ใช้ร่วมกับ Schema.org (Event, BlogPosting, etc.)
- JavaScript: Parse ได้ง่ายด้วย
new Date(element.dateTime)
รูปแบบ datetime ที่รองรับ
<!-- วันที่ --> <time datetime="2024-01-15">15 ม.ค. 2567</time>
<!-- เวลา --> <time datetime="14:30:00">14:30</time>
<!-- วันที่และเวลา (Local) --> <time datetime="2024-01-15T14:30">...</time>
<!-- วันที่และเวลา + Timezone --> <time datetime="2024-01-15T14:30+07:00">...</time>
<!-- ระยะเวลา --> <time datetime="P3D">3 วัน</time>