Bold, Italic, Underline

Bold, Italic, Underline ✍️

Ini adalah elemen-elemen HTML untuk memformat tampilan teks — memberi penekanan, gaya, atau makna khusus pada bagian tertentu dari konten.

Perbedaan Tag Semantik vs Presentasional

Sebelum masuk ke masing-masing tag, penting dipahami bahwa HTML memiliki dua jenis tag untuk formatting teks:

Ini perbedaan mendasar yang sering diabaikan pemula. Mari kita bahas satu per satu.

Bold — Teks Tebal

<strong> — Semantik (direkomendasikan)

Menandai teks yang benar-benar penting secara konten. Screen reader akan membacanya dengan penekanan lebih. Google juga menganggapnya sebagai kata kunci penting:

<p>Perhatian: <strong>jangan matikan komputer</strong> selama proses instalasi.</p>

<b> — Presentasional

Hanya menebalkan teks secara visual, tanpa makna kepentingan apapun:

<p>Bahan yang dibutuhkan: <b>tepung, gula, telur</b>.</p>

Keduanya tampil sama di browser — teks tebal — tapi maknanya berbeda:

<strong> = "Ini PENTING, perhatikan!"
<b>      = "Ini tebal, tapi tidak ada makna khusus"

Italic — Teks Miring

<em> — Semantik (direkomendasikan)

Singkatan dari emphasis — memberikan penekanan pada kata atau frasa. Screen reader akan mengubah intonasi saat membacanya:

<p>Kamu <em>harus</em> membaca bagian ini sebelum melanjutkan.</p>
<p>Dia berkata, "<em>Saya tidak pernah bilang itu.</em>"</p>

<i> — Presentasional

Hanya memiringkan teks secara visual. Digunakan untuk istilah teknis, kata asing, judul karya, atau nama ilmiah:

<p>Dalam dunia desain, istilah <i>whitespace</i> sangat penting.</p>
<p>Nama ilmiah harimau adalah <i>Panthera tigris</i>.</p>
<p>Lagu favorit saya adalah <i>Bohemian Rhapsody</i>.</p>

Underline — Teks Bergaris Bawah

<u> — Presentasional

Menambahkan garis bawah pada teks. Penggunaannya perlu sangat hati-hati karena secara visual mirip dengan hyperlink:

<p>Perhatikan bagian yang <u>digarisbawahi</u> ini.</p>

⚠️ Hindari menggunakan <u> untuk teks biasa karena pengguna akan mengira itu adalah link yang bisa diklik. Lebih baik gunakan CSS jika memang hanya ingin efek visual garis bawah.

Penggunaan <u> yang tepat adalah untuk menandai kesalahan ejaan atau anotasi:

<!-- Menandai kata yang salah eja -->
<p>Kata "<u class="spelling-error">temmpe</u>" seharusnya ditulis "tempe".</p>

Strikethrough — Teks Dicoret

Meski bukan bold/italic/underline, tag ini sering dipelajari bersamaan:

<s> — Presentasional

Menampilkan teks yang sudah tidak relevan atau tidak berlaku lagi:

<p>Harga normal: <s>Rp 150.000</s> → Harga promo: Rp 99.000</p>

<del> — Semantik

Menandai teks yang dihapus dari dokumen (bermakna bagi screen reader):

<p>Pertemuan dijadwalkan pada <del>Senin</del> <ins>Selasa</ins>, 20 Januari.</p>

<ins> adalah pasangan <del> — menandai teks yang disisipkan/ditambahkan. Tampil dengan garis bawah secara default.

Kombinasi Tag

Tag-tag ini bisa dikombinasikan — pastikan urutan nesting benar:

<!-- Tebal sekaligus miring -->
<p>Ini adalah <strong><em>sangat penting</em></strong> untuk diperhatikan.</p>

<!-- Tebal, miring, dan dicoret -->
<p>Promo <s><strong>Rp 200.000</strong></s> sekarang <strong>Rp 99.000</strong>!</p>

Alternatif dengan CSS

Semua efek di atas bisa juga dicapai murni dengan CSS tanpa tag khusus — lebih fleksibel untuk kebutuhan visual:

<p>
  <span style="font-weight: bold;">Teks tebal</span>,
  <span style="font-style: italic;">teks miring</span>,
  <span style="text-decoration: underline;">teks bergaris bawah</span>,
  <span style="text-decoration: line-through;">teks dicoret</span>.
</p>

Kapan Menggunakan yang Mana?

Teks benar-benar penting secara konten  →  <strong>
Teks tebal hanya untuk tampilan         →  <b> atau CSS font-weight
Menekankan kata/frasa                   →  <em>
Istilah asing, judul, teknis            →  <i>
Harga lama / konten tidak berlaku       →  <s>
Menandai penghapusan dalam dokumen      →  <del>

Ringkasan Lengkap

💡 Tips: Biasakan menggunakan tag semantik (<strong>, <em>) daripada tag presentasional (<b>, <i>). Selain lebih baik untuk SEO dan aksesibilitas, kode juga menjadi lebih bermakna dan mudah dipahami oleh developer lain. 🧑‍💻