Tutorial Text HTML Part 5: Cara Membuat Huruf Tercoret (Strikethrough) HTML (tag s dan tag del)

Dalam tutorial Text HTML kali ini, kita akan membahas tentang Cara Membuat Huruf Tercoret di dalam HTML. Huruf / Text tercoret ini dikenal juga dengan istilah strikethrough. Strikethrough biasanya digunakan untuk mengoreksi text atau bagian dari kalimat. Untuk membuat text tercoret ini, kita menggunakan tag <s> dan tag <del>.

---

Tag <s> untuk Penulisan Strikethrough dalam HTML

Tag <s> adalah singkatan dari Strikethrough. Strikethrough adalah istilah yang dipakai untuk membuat text dengan garis tercoret. Tag <s> tidak memiliki arti apa-apa dan murni merupakan format text untuk menampilkan text dengan strikethrough.

Tag <s> masuk ke dalam tipe tag inline, yang akan mengikuti alur text yang ada.
Berikut adalah contoh cara penulisan dan penggunaan tag <s> di dalam HTML:

Tag <del> untuk Text yang di Koreksi

Tag <del> adalah singkatan dari delete. Sesuai dengan namanya, tag <del> ditujukan untuk penulisan text yang dianggap salah dan ingin dikoreksi. Tag <del> merupakan kebalikan dari tag <ins> yang bertujuan untuk penambahan text baru.

Tag <del> saya masukkan ke dalam tutorial ini karena secara default web browser menampilkan tag <del> dengan garis tercoret. Tag ini termasuk jenis inline element.

Berikut adalah contoh cara penulisan dan penggunaan tag <del> di dalam HTML:

Secara pribadi, saya menggunakan tag <s> untuk bagian text yang tidak ditujukan apa-apa selain garis tercoret. Namun apabila ada bagian text yang memang dirasa perlu dikoreksi, tag <del> akan membantu struktur konten dari HTML dan lebih disarankan.

Selain menggunakan tag <s> dan <del>, HTML versi 4.01 memiliki tag <strike> dengan tampilan yang sama, namun HTML5 menyatakan tag <strike> deprecated, yang artinya disarankan untuk tidak digunakan, dan kemungkinan tidak akan didukung web browser. Anda mungkin masing menemukan tag ini terutama dalam website lama.

Untuk membuat hasil huruf dengan garis tercoret di dalam CSS, kita bisa menggunakan:

text-decoration: line-through;

Tutorial HTML Lanjutan:

• Tutorial Text HTML Part 6: Cara Menulis Persamaan Matematis (tag sup dan sub)
• Tutorial Text HTML Part 7: Cara Membuat Kutipan (tag blockquote dan q)
• Tutorial Text HTML Part 8: Cara Membuat Text HTML Tanpa Format (tag pre dan code)
• Tutorial Text HTML Part 9: Cara Untuk Merubah Arah Text dalam HTML (tag bdo)
• Tutorial Text HTML Part 10: Tag Untuk Penulisan Hal Teknis (tag samp, kbd, var)
• Tutorial Text HTML Part 11: Cara Menampilkan Karakter Khusus HTML
• Tutorial Text HTML Part 12: Tag abbr, cite, dfn, dan small untuk Struktur Text HTML
• Tutorial Text HTML Part 13: Tag-tag Deprecated untuk Struktur Text dalam HTML