HTML del dan ins: Menampilkan Perubahan dan Tanggalnya

HTML <del> menandai konten yang dihapus dari dokumen, dan <ins> menandai konten yang dimasukkan. Meskipun tampilan defaultnya biasanya garis coret dan garis bawah, tujuan utamanya adalah menyampaikan makna perubahan; mereka tidak secara otomatis mengelola versi dokumen atau menyimpan riwayat pengeditan.

Contoh lengkap: tampilkan konten yang dihapus dan dimasukkan bersama-sama

Pengumuman jadwal berikut adalah contoh latihan. Simpan sebagai changes.html dan buka di browser untuk melihat nilai lama dan baru. Tanggal dan alasan juga muncul dalam teks yang terlihat sehingga pembaca dapat memahami perubahan bahkan ketika warna atau garis sulit dibedakan.

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Contoh perubahan jadwal</title>
</head>
<body>
  <h1>Pertemuan latihan: perubahan jadwal</h1>
  <p>Waktu mulai:
    <del datetime="2026-10-30" cite="#reason">10:00</del>
    <ins datetime="2026-10-30" cite="#reason">11:00</ins>
  </p>
  <p>Waktu mulai sebelumnya adalah 10:00; waktu mulai baru adalah 11:00.</p>
  <p id="reason">Pada 30 Oktober 2026, jadwal diubah untuk menyediakan lebih banyak waktu persiapan.</p>
</body>
</html>

Dengan gaya default khas, pukul 10:00 dicoret dan pukul 11:00 digarisbawahi. CSS dapat mengubah penampilannya. Menerapkan del tidak menghapus teks asli dari data, jadi jangan menggunakannya untuk menyembunyikan kata sandi, informasi pribadi, atau konten lain yang tidak boleh dipublikasikan.

Peran atribut datetime dan cite

Atribut datetime yang bersifat opsional mencatat tanggal, atau tanggal dan waktu, ketika perubahan dilakukan. Contoh 2026-10-30 adalah tanggal dalam format tahun-bulan-hari. Jika Anda membutuhkan waktu yang tepat, Anda dapat menyertakan offset zona waktu secara eksplisit, seperti pada 2026-10-30T09:00:00+09:00. Menambahkan tanggal tidak menjadwalkan publikasi atau membuat dokumen berubah secara otomatis pada waktu tersebut.

Atribut cite menentukan URL dari sumber yang menjelaskan perubahan. Contoh menggunakan #reason untuk menunjuk ke paragraf penjelasan dalam dokumen yang sama. Atribut ini tidak secara otomatis menampilkan penjelasan atau tautan yang bisa diklik, jadi sertakan alasan dan tanggal yang diperlukan juga dalam teks yang terlihat.

Bedakan pengeditan dokumen dari garis dekoratif

Gunakan del dan ins untuk merepresentasikan suntingan pada sebuah dokumen. Untuk coretan pada informasi yang tidak lagi akurat atau relevan, pertimbangkan juga makna dari <s>. Gunakan CSS text-decoration untuk garis yang murni dekoratif. Penampilan visual yang identik tidak berarti makna yang identik.

Pembaca layar mungkin tidak mengumumkan setiap batas penghapusan atau penyisipan dengan pengaturan default mereka. Untuk perubahan yang penting, jelaskan nilai lama dan baru dalam satu kalimat, seperti contohnya. Jangan membedakan kedua keadaan hanya dengan warna, dan nyatakan dengan jelas informasi mana yang saat ini valid. Referensi del di MDN dan ins di MDN menggambarkan elemen dan atributnya.