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:

html
<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:

  1. Baris 2 (<time datetime="2026-10-18">): nilai tanggal memakai pola tahun-bulan-tanggal (YYYY-MM-DD); teks yang tampil ditulis dalam format Indonesia.
  2. Baris 3 (<time datetime="2026-10-20T08:00">): huruf T menjadi pemisah antara tanggal dan jam (YYYY-MM-DDTHH:MM); teks tampilannya tetap bebas.
  3. Kedua elemen time: tidak menambahkan tampilan apa pun — keduanya hanya menempelkan data terbaca mesin pada teks manusiawi.

Format datetime yang Umum #

Jenis nilaiContohKeterangan
Tanggal2026-10-18pola YYYY-MM-DD
Tanggal dan waktu2026-10-20T08:30huruf T memisahkan tanggal dan jam
Waktu saja08:30pola HH:MM
Waktu dengan zona2026-10-20T08:30+07:00offset zona waktu, misalnya WIB
DurasiPT2Hdurasi dua jam — time juga bisa menyimpan rentang durasi
html
<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.