menandai teks yang sudah tidak relevan atau tidak benar tapi tetap ditampilkan untuk konteks, seperti harga yang dicoret. menandai teks yang dihapus dari dokumen, sering di samping yang menunjukkan penggantinya, dan bisa membawa atribut datetime dan cite.

Dokumentasi HTML interaktif: Garis Bawah

Q: Bagaimana cara memberi garis bawah pada teks di HTML?

Bungkus dengan , atau terapkan text-decoration: underline di CSS. Pakai hanya untuk maknanya yang spesifik (seperti menandai kata yang salah eja); untuk garis bawah yang murni tampilan, pakai CSS pada sebuah atau pada elemen itu sendiri.

Q: Bagaimana cara mencoret teks di HTML?

Pakai untuk teks yang sudah tidak akurat, seperti harga lama, dan untuk teks yang dihapus dalam sebuah suntingan. Keduanya menggambar garis melintang di teks. Di CSS, text-decoration: line-through menghasilkan tampilan yang sama.

Q: Apakah tag sudah usang?

Tidak. dinyatakan usang di HTML 4, tapi kembali di HTML5 dengan makna baru: teks dengan anotasi non-tekstual, seperti salah eja atau nama diri dalam teks berbahasa Tionghoa. Tag ini valid, hanya saja jarang menjadi pilihan yang tepat.

Garis Bawah dan Coret di HTML: Tag u, ins, s dan del

Beri garis bawah pada teks di HTML dengan atau text-decoration di CSS, dan coret teks dengan <s> atau <del>. Pelajari arti setiap tag, bagaimana <ins> dan <del> menandai suntingan, dan kenapa garis bawah pada teks yang bukan link membingungkan pembaca.

Halaman ini dilengkapi editor yang bisa dijalankan. Edit, jalankan, dan lihat output-nya seketika.

Oleh Kevin Spektor, Co-founder & CTO

Diterbitkan Sep 24, 2026

Cara memberi garis bawah pada teks di HTML

Ada dua cara: tag , atau property CSS text-decoration: underline. Keduanya menggambar garis yang sama:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Underline</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 18px; }
    .underline { text-decoration: underline; }
  </style>
</head>
<body>
  <p>With the tag: <u>underlined text</u></p>
  <p>With CSS: <span class="underline">underlined text</span></p>
  <p>A link, for comparison: <a href="#">underlined by default</a></p>
</body>
</html>

Masalah dengan garis bawah apa pun ada di baris ketiga: pembaca mengira teks bergaris bawah adalah link, lalu mengkliknya. Beri garis bawah pada teks biasa hanya kalau ada alasan yang jelas.

Arti tag u

 bukan tombol "garis bawah" serba guna. Di HTML saat ini, tag ini berarti teks dengan anotasi yang tidak diucapkan: tanda yang mengatakan "ada yang istimewa di sini" tanpa mengatakan apa. Penggunaan sungguhan yang umum:

menandai salah eja (seperti yang dilakukan pengolah kata, sering dengan garis merah bergelombang),
menandai nama diri dalam teks berbahasa Tionghoa, yang merupakan konvensi tipografi di sana.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>u for spelling</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 18px; }
    u.spelling { text-decoration: underline wavy #dc2626; }
  </style>
</head>
<body>
  <p>Check this sentence: I <u class="spelling">recieved</u> the package.</p>
</body>
</html>

Untuk penekanan, pakai  atau  (lihat bold), dan untuk judul buku pakai <cite>. Kalau kamu hanya ingin tampilannya, pakai CSS.

Coretan: s dan del

HTML punya dua tag yang menggambar garis melintang di teks, dan artinya berbeda:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Strikethrough</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 18px; }
    .new { color: #16a34a; font-weight: bold; }
  </style>
</head>
<body>
  <p>Price: <s>$49</s> <span class="new">$29</span></p>
  <ul>
    <li><del>Buy milk</del></li>
    <li>Call the bank</li>
  </ul>
</body>
</html>

Tag	Makna	Penggunaan umum
`<s>`	Sudah tidak akurat atau relevan, tetap ditampilkan untuk konteks	Harga lama, jenis tiket yang habis terjual
`<del>`	Dihapus dari dokumen	Suntingan, changelog, item selesai di daftar tugas

Menandai suntingan dengan ins dan del

<ins> adalah pasangan <del>: tag ini menandai teks yang ditambahkan. Browser memberinya garis bawah secara default. Keduanya menerima datetime (kapan perubahan terjadi) dan cite (URL yang menjelaskannya):

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>ins and del</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 18px; }
    del { color: #dc2626; background: #fee2e2; }
    ins { color: #16a34a; background: #dcfce7; text-decoration: none; }
  </style>
</head>
<body>
  <p>
    The meeting is on
    <del datetime="2026-09-20">Monday</del>
    <ins datetime="2026-09-21">Tuesday</ins>
    at 10:00.
  </p>
</body>
</html>

Gaya merah dan hijau ini adalah tampilan diff yang sudah familiar. text-decoration: none pada ins menghapus garis bawah default-nya supaya tidak terlihat seperti link.

Garis bawah dan coretan dengan CSS

text-decoration mengerjakan bagian tampilannya untuk elemen apa pun: property ini menerima warna dan gaya, dan text-decoration-thickness mengatur ketebalannya. Untuk garis yang murni dekoratif, inilah alat yang tepat:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>text-decoration</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 20px; }
    .brand { text-decoration: underline #2563eb; text-decoration-thickness: 3px; text-underline-offset: 4px; }
    .dotted { text-decoration: underline dotted #f59e0b; }
    .through { text-decoration: line-through #dc2626; text-decoration-thickness: 2px; }
    .over { text-decoration: overline; }
  </style>
</head>
<body>
  <p><span class="brand">thick blue underline</span></p>
  <p><span class="dotted">dotted underline</span></p>
  <p><span class="through">red line through</span></p>
  <p><span class="over">overline</span></p>
</body>
</html>

Cara menghapus garis bawah dari link, offset garis bawah, dan detail text-decoration lainnya ada di halaman CSS underline.

Aksesibilitas

Dukungan screen reader untuk <s>, <del> dan <ins> tidak konsisten: sebagian mengumumkannya sebagai dihapus atau disisipkan, banyak yang membacanya sebagai teks biasa, jadi pendengar mungkin mendengar "Price 49 dollars 29 dollars" tanpa petunjuk mana yang berlaku sekarang. Kalau perbedaannya penting, sebutkan juga dengan kata-kata, misalnya dengan teks yang disembunyikan secara visual tapi tetap dibacakan, atau cukup "Dulu $49, sekarang$ 29".

Kesalahan umum

Memberi garis bawah pada teks yang bukan link. Pembaca akan mencoba mengkliknya. Untuk menyorot, pakai teks tebal, warna atau background.
Memakai  untuk penekanan. Pakai  atau .
Memakai <strike>. Tag ini sudah usang. Pakai <s>, <del> atau text-decoration: line-through.
Memakai <s> untuk konten yang dihapus di riwayat dokumen. Itu tugas <del>, yang juga bisa mencatat kapan penghapusan terjadi.
Hanya mengandalkan garisnya untuk menyampaikan makna. Banyak screen reader tidak mengumumkannya.

Pertanyaan yang sering diajukan

Bagaimana cara memberi garis bawah pada teks di HTML?

Bungkus dengan , atau terapkan text-decoration: underline di CSS. Pakai  hanya untuk maknanya yang spesifik (seperti menandai kata yang salah eja); untuk garis bawah yang murni tampilan, pakai CSS pada sebuah  atau pada elemen itu sendiri.

Bagaimana cara mencoret teks di HTML?

Pakai <s> untuk teks yang sudah tidak akurat, seperti harga lama, dan <del> untuk teks yang dihapus dalam sebuah suntingan. Keduanya menggambar garis melintang di teks. Di CSS, text-decoration: line-through menghasilkan tampilan yang sama.

Apakah tag sudah usang?

Tidak.  dinyatakan usang di HTML 4, tapi kembali di HTML5 dengan makna baru: teks dengan anotasi non-tekstual, seperti salah eja atau nama diri dalam teks berbahasa Tionghoa. Tag ini valid, hanya saja jarang menjadi pilihan yang tepat.

Apa yang terjadi dengan tag <strike>?

<strike> sudah usang. Browser masih menggambarnya sebagai coretan, tapi itu bukan HTML yang valid. Pakai <s> atau <del> tergantung maknanya, atau text-decoration: line-through.

Apa perbedaan <s> dan <del>?

<s> menandai teks yang sudah tidak relevan atau tidak benar tapi tetap ditampilkan untuk konteks, seperti harga yang dicoret. <del> menandai teks yang dihapus dari dokumen, sering di samping <ins> yang menunjukkan penggantinya, dan bisa membawa atribut datetime dan cite.

Konsep terkait