Time Element — HTML

Pernah liat artikel berita "Diposting 2 jam lalu" di feed sosial media? Format itu enak buat manusia, tapi mesin pencari Google butuh tanggal absolute supaya…

<time> menandai tanggal, jam, atau durasi di dalam teks. Tanggalnya ditulis dua kali: sekali buat manusia sebagai teks biasa, dan sekali buat mesin di atribut datetime dengan format baku. Mesin di sini maksudnya mesin pencari, aplikasi kalender, atau script yang membaca halaman.

🧪 Tebakan cepat: kalau teks 15 April 2026 diganti jadi Rabu depan, tanggal yang dibaca mesin ikut berubah gak? Tebak dulu, jawabannya ada di bagian "Satu tanggal, dua pembaca".

Satu tanggal, dua pembaca

<p>Tanggal: <time datetime="2026-04-15">15 April 2026</time></p>

Hasilnya, pengunjung cuma melihat "Tanggal: 15 April 2026". Nilai 2026-04-15 gak tampil, tapi mesin bisa membacanya.

Jawaban tebakan: teksnya boleh diganti "Rabu depan" atau "pertengahan April", dan mesin tetap membaca 2026-04-15. Yang dibaca mesin cuma atribut datetime, bukan teks di antara tag.

Atribut selalu ditulis nama="nilai" di dalam tag pembuka. <time datetime> tanpa ="..." gak berisi tanggal apa-apa, dan tanggal yang ditulis sebagai teks di antara <time> dan </time> gak dianggap atribut.

Format nilai datetime

Mesin cuma paham format baku (namanya ISO 8601). Angka semua, tanpa spasi:

Durasi

<p>Durasi: <time datetime="PT2H30M">2 jam 30 menit</time></p>

Cara membaca PT2H30M:

Jadi PT45M artinya 45 menit, dan PT1H artinya 1 jam. Hari ditulis sebelum T: P3D artinya 3 hari. Hati-hati, M sebelum T artinya bulan, sesudah T artinya menit.

⚠️ Jebakan yang sering ketemu

TL;DR: <time datetime="2026-04-15">15 April 2026</time>: atribut datetime buat mesin, teks di antara tag buat manusia. Format datetime baku dan tanpa spasi: 2026-04-15 (tanggal), 19:30 (jam), 2026-04-15T09:30+07:00 (tanggal, jam dan zona WIB), PT2H30M (durasi 2 jam 30 menit). Taruh <time> di dalam kalimatnya.

Yang akan kamu pelajari