Cara kita menulis waktu sering tidak ramah bagi mesin: “kemarin”, “Selasa lalu”, “18 Oktober” — manusia memahaminya dari konteks, tetapi mesin pencari dan aplikasi kalender tidak bisa menebaknya. Sebaliknya, menampilkan tanggal mentah seperti 2026-10-18 ke pembaca juga terasa kaku.
Elemen time menjembatani kedua kebutuhan itu: teks yang tampil tetap ditulis untuk manusia, sementara tanggal dan jam yang sebenarnya disimpan pada atribut yang bisa dibaca mesin.
Menandai Tanggal dan Jam #
Aturannya: elemen time membungkus tanggal atau jam tertentu, dan atribut datetime menyimpan versi terbaca mesin dengan format standar ISO 8601. Teks di dalam time tampil apa adanya; program seperti mesin pencari membaca nilai datetime-nya.
Mekanismenya seperti ini: browser menampilkan isi time sebagai teks biasa tanpa perubahan, lalu skrip dan penjelajah otomatis membaca atribut datetime untuk mendapatkan momen pastinya. Tanpa time, sebuah tanggal hanyalah untaian karakter yang formatnya harus ditebak satu per satu.
Contoh pemakaian pada artikel berita kedai:
<article>
<h2>Kedai Siti Buka Cabang Baru</h2>
<p>Berita ini diperbarui pada <time datetime="2026-10-18">18 Oktober 2026</time>.</p>
<p>Cabang kedua mulai beroperasi <time datetime="2026-10-20T08:00">Selasa pukul 08.00</time>.</p>
</article>Hasil Render:
Mari kita telaah kode di atas:
- Baris 2 (
<time datetime="2026-10-18">): nilai tanggal memakai pola tahun-bulan-tanggal (YYYY-MM-DD); teks yang tampil ditulis dalam format Indonesia. - Baris 3 (
<time datetime="2026-10-20T08:00">): hurufTmenjadi pemisah antara tanggal dan jam (YYYY-MM-DDTHH:MM); teks tampilannya tetap bebas. - Kedua elemen time: tidak menambahkan tampilan apa pun — keduanya hanya menempelkan data terbaca mesin pada teks manusiawi.
Format datetime yang Umum #
| Jenis nilai | Contoh | Keterangan |
|---|---|---|
| Tanggal | 2026-10-18 | pola YYYY-MM-DD |
| Tanggal dan waktu | 2026-10-20T08:30 | huruf T memisahkan tanggal dan jam |
| Waktu saja | 08:30 | pola HH:MM |
| Waktu dengan zona | 2026-10-20T08:30+07:00 | offset zona waktu, misalnya WIB |
| Durasi | PT2H | durasi dua jam — time juga bisa menyimpan rentang durasi |
<p>Pesanan diproses <time datetime="2026-10-21T14:30">tadi siang</time> dan dikirim ke alamat Budi <time datetime="2026-10-22T09:00">keesokan paginya</time>.</p>Untungnya bagi Mesin #
Tiga pihak diuntungkan oleh penandaan ini. Mesin pencari dapat menampilkan tanggal terbit atau tanggal acara pada hasil pencarian. Aplikasi kalender dan agenda dapat mengenali jadwal dari halaman lalu menawarkannya kepada pengguna. Skrip kita sendiri dapat menghitung selisih waktu tanpa harus memilah format teks manual.
Ringkasan #
- time menandai tanggal atau jam tertentu; atribut datetime menyimpan versi terbaca mesin.
- Format datetime mengikuti ISO 8601:
YYYY-MM-DD,YYYY-MM-DDTHH:MM,HH:MM, offset zona, hingga durasi. - Teks yang tampil tetap bebas dan manusiawi.
- Mesin pencari, aplikasi kalender, dan skrip adalah pihak yang membaca datetime.
Chapter berikutnya membahas address — elemen yang namanya menyesatkan tetapi tugasnya jelas: informasi kontak pemilik dokumen.