Cara Membuat Tulisan dengan Garis Bawah dan Tercoret di HTML

Pada materi kali ini, saya akan membahas tentang formatting teks yang berfungsi membuat tulisan dengan garis bawah dan tercoret. Untuk membuat teks dengan garis bawah, digunakan pasangan tag . Kemudian untuk teks yang dicoret seperti “~~coretan~~”, ada tiga tag yang digunakan untuk jenis format teks ini yaitu tag <strike>, tag <s> dan tag <del>. Ketiga tag yang menampilkan teks dicoret tersebut tentunya memiliki perbedaan yang akan dijelaskan dibawah.

Seperti yang sudah saya katakan sebelumnya bahwa elemen di dalam formatting ada dua yaitu Logical Formatting dan Physical Formatting. Physical Formatting digunakan untuk memformat teks secara karakteristik teks sedangkan Logical Formatting untuk memformat teks menurut kandungan atau isi teks. Tag , <s>, <strike>, dan <del> merupakan kelompok Physical Formatting.

Untuk pembahasan lebih lanjut, mari simak penjelasan mengenai tulisan dengan garis bawah dan coretan dibawah ini :

A. Tulisan dengan garis bawah

Seperti yang telah disebutkan sebelumnya, Anda dapat menggunakan tag untuk format garis bawah (underline). Dimana tag menyatakan awal dari tulisan yang digaris bawahi dan tag menyatakan akhir tulisan yang digaris bawahi.

Berikut contoh kode penggunaan tag :

<!DOCTYPE html>
<html>
 <head>
  <title>Penggunaan Garis Bawah di HTML</title>
 </head>
 <body>
  <u>Tulisan Ini Digaris Bawahi</u>
 </body>
</html>

Setelah dibuka di browser, hasilnya akan terlihat seperti gambar dibawah ini :

Pada dasarnya, tag hanya didukung oleh HTML 4.01 dan tidak didukung oleh HTML5. Alasannya adalah karena tag sudah dapat digantikan dengan CSS menggunakan text- decoration : underlined.

Berikut contoh penggunaan CSS untuk membuat garis bawah pada teks :

<!DOCTYPE html>
<html>
 <head>
  <title>Penggunaan Garis Bawah di HTML</title>
 <style type="text/css">
  h4{
  text-decoration: underline;
  }
 </style>
 </head>
 <body>
  <h4>Tulisan Ini Digaris Bawahi</h4>
 </body>
</html>

Setelah dibuka di browser, hasilnya akan terlihat seperti gambar dibawah ini :

B. Tulisan dengan coretan

Untuk membuat efek tulisan dicoret pada teks dapat menggunakan tag <s>, <strike> dan <del>. Dimana ketiga tag tersebut sama – sama ditampilkan dalam bentuk yang sama di browser yaitu teksnya dicoret. Berikut contoh penggunaan ketiga tag tersebut:

<html>
 <head>
  <title>Teks dengan Coretan di HTML</title>
 </head>
 <body>
  <s>Lihat Ini Tulisannya Dicoret</s><br>
  <strike>Lihat Ini Tulisannya Dicoret</strike><br>
  <del>Lihat Ini Tulisannya Dicoret</del><br>
 </body>
</html>

Setelah dibuka di browser, hasilnya akan terlihat seperti gambar dibawah ini :

Terlihat dari gambar diatas, secara visual di browser sama sekali tidak ada perbedaan diantara ketiganya tetapi secara penggunaan dan makna memiliki perbedaan. Pertama, tag <s> adalah singkatan dari Strikethrough yang membuat teks dicoret. Pada HTML 4.01, tercoretnya teks dengan menggunakan tag <s> tidak mengandung makna apa-apa hanya merupakan bentuk dari format text yang menampilkan teks dengan strikethrough. Sedangkan pada HTML5, tag <s> digunakan untuk mendefinisikan teks tersebut akan dikoreksi (no longer correct).

Kedua, tag del dan strike sama-sama berfungsi untuk menampilkan teks dicoret dalam artian teks itu salah atau dihapus. Ketiga, memang tag del dan strike memiliki fungsi yang sama, perbedaannya adalah tag strike yang berasal dari HTML 4.0.1 sudah tidak didukung lagi oleh HTML5 karena sudah dianggap deprecated (tidak disarankan untuk digunakan dan mungkin sudah tidak didukung web browser). Sedangkan, tag <del> masih didukung oleh HTML5.

Elemen <del> memiliki beberapa atribut diantaranya adalah :

Atribut	Fungsi
Datetime	Merincikan tanggal dan waktu ketika teks dicoret atau dihapus
Cite	Menspesifikkan URL ke sebuah dokumen yang menjelaskan kenapa teks tersebut dihapus atau dicoret

Pada CSS, umumnya browser menampilkan elemen <s> dan <del> dengan nilai tetap yaitu text- decoration : line-through.

Sekarang anda pasti sudah paham mengenai fungsi dari tag-tag yang sudah dijelaskan diatas. Tutorial HTML selanjutnya mengenai penggunaan elemen superscript, subscript, small dan marked text untuk mempelajari lebih lanjut mengenai format teks di HTML.