Efek coretan pada teks (strikethrough) tidak hanya ditemukan pada dokumen Microsoft Word atau spreadsheet Microsoft Excel. Ketika Anda membuka laman web, Anda terkadang juga menjumpai teks dengan coretan berupa garis horisontal tepat berada di tengah teks. Membuat coretan pada teks di aplikasi Microsoft Office mungkin cukup mudah, namun bagaimana bila membuat efek coretan pada teks untuk ditampilkan di laman web?
Bila Anda ingin membuat efek coretan pada teks (strikethrough effect) untuk ditampilkan di laman web, Anda dapat menggunakan elemen (tag) HTML atau melalui style CSS. Artikel kali ini adalah tentang membuat efek coretan pada teks menggunakan elemen (tag) HTML. Ada tiga elemen HTML yang bisa digunakan untuk memberi efek coretan pada teks yaitu elemen strike atau tag <strike>, elemen del atau tag <del> dan elemen s atau tag <s>.
Baca artikel:
Elemen strike atau tag <strike> adalah elemen yang sudah tidak digunakan lagi di HTML4 dan juga menjadi elemen usang di HTML5. Meskipun elemen ini masih berkerja atau efek coretan pada teks masih ditampilkan di browser, Anda sangat dianjurkan untuk tidak menggunakan elemen strike (<strike>) lagi untuk mengantisipasi sewaktu-waktu dihapus. Sebagai gantinya, gunakan elemen del (tag <del>) atau elemen s (tag <s>).
Baca artikel:
Elemen HTML del atau tag <del> digunakan untuk mengidentifikasi teks yang telah dihapus dari dokumen tetapi tetap disimpan untuk menunjukkan histori modifikasi. Elemen HTML s atau tag <s> digunakan untuk mewakili sesuatu yang tidak lagi relevan atau tidak akurat. Karena elemen HTML menentukan struktur dan konten halaman web, pilih dan gunakan elemen dengan tepat, tidak hanya sekedar efek coretan yang sama pada teks.
Berikut ini adalah contoh penggunaan elemen strike (<strike>), del (<del>) dan s (<s>) yang masing-masing memberi hasil sama berupa efek coretan pada teks:
<!DOCTYPE html> <html> <body> <h2>Efek coretan teks dengan HTML</h2> <p>Efek coretan teks seperti <strike>NOTHING</strike> menggunakan elemen HTML strike.</p> <p>Efek coretan teks seperti <del>NOTHING</del> menggunakan elemen HTML del.</p> <p>Efek coretan teks seperti <s>NOTHING</s> menggunakan elemen HTML s.</p> </body> </html>
Berikut ini adalah hasil rendering di web browser Google Chrome:
