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

84

Yodha.web.id – 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:

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
<head>
<title>Belajar HTML di Yodha.web.id</title>
</head>
<body>
<h3>Saya sedang belajar HTML di Yodha.web.id</h3>
<p><s>JavaScript</s> HTML adalah dasar dari
semua halaman web di internet. Jika anda ingin mempelajari cara 
membuat website, maka hal pertama yang harus dipelajari adalah HTML</p>
</body>
</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:

1
2
3
4
5
6
7
8
9
10
11
12
13
<html>
<head>
<title>Belajar HTML di Yodha.web.id</title>
</head>
<body>
<h3>Saya sedang belajar HTML di Yodha.web.id</h3>
<p>HTML atau Hypertext Markup Language adalah dasar dari
semua halaman web di internet. 
Jika anda ingin mempelajari cara membuat website, maka 
<del>hal pertama yang harus dipelajari adalah PHP</del>
<ins>hal pertama yang harus dipelajari adalah HTML</ins></p>
</body>
</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.

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

text-decoration: line-through;