Belajar HTML #06 : Panduan Lengkap Text Formatting HTML: Bold, Italic, dan Lainnya

Apa Itu Text Formatting di HTML?

Text formatting adalah proses memberikan gaya visual pada teks agar lebih mudah dibaca dan dipahami. Di HTML, text formatting dilakukan menggunakan tag-tag khusus yang membuat teks menjadi tebal, miring, bergaris bawah, dan berbagai variasi lainnya.

Bayangkan membaca sebuah artikel panjang tanpa satu pun penekanan teks — semua terlihat datar dan membosankan. Dengan text formatting, kamu bisa mengarahkan perhatian pembaca ke bagian-bagian penting, menyoroti istilah asing, atau menandai perubahan pada konten.

Berikut ringkasan tag text formatting yang akan kita bahas dalam artikel ini:

Membuat Teks Tebal dengan dan

Teks tebal digunakan untuk memberikan penekanan visual pada kata atau kalimat penting. HTML menyediakan dua tag untuk membuat teks tebal: <b> dan <strong>.

Secara tampilan, keduanya menghasilkan teks tebal yang identik. Namun dari sisi makna semantik, keduanya berbeda:

• <b> (bold) — membuat teks tebal secara visual saja, tanpa memberikan makna khusus. Cocok untuk kebutuhan styling murni.
• <strong> — membuat teks tebal sekaligus menandai bahwa teks tersebut sangat penting. Screen reader akan membacanya dengan penekanan, dan mesin pencari menganggapnya lebih bermakna.

Contoh penggunaan:

<p>
  <strong>Perhatian: Pendaftaran ditutup besok!</strong>
  Pastikan kamu sudah mengisi formulir dengan <b>data yang benar</b>.
</p>

Tips: Untuk konten web dan artikel, lebih disarankan menggunakan <strong> karena lebih baik untuk SEO dan aksesibilitas.

Membuat Teks Miring dengan dan

Teks miring biasanya digunakan untuk menandai istilah asing, judul karya, atau memberikan penekanan ringan. Dua tag yang tersedia adalah <i> dan <em>.

Sama seperti tebal, keduanya terlihat identik secara visual tetapi berbeda secara semantik:

• <i> (italic) — membuat teks miring tanpa makna khusus. Cocok untuk istilah teknis, kata dalam bahasa asing, atau nama ilmiah.
• <em> (emphasis) — membuat teks miring sekaligus menandai penekanan. Screen reader akan membacanya dengan intonasi berbeda.

Contoh penggunaan:

<p>
  Istilah <i>text formatting</i> berarti pemformatan teks.
  Kamu <em>harus</em> memahami perbedaan semantiknya.
</p>

lihat foto

Membuat Garis Bawah dengan dan

Garis bawah pada teks bisa dibuat menggunakan tag <u> (underline) atau <ins> (insert). Meskipun tampilannya sama, konteks penggunaannya berbeda:

• <u> — memberi garis bawah untuk menandai teks yang perlu perhatian khusus, misalnya kata yang sengaja salah eja atau nama dalam bahasa Tionghoa.
• <ins> — menandai teks yang baru disisipkan atau ditambahkan ke dalam dokumen. Biasanya digunakan berpasangan dengan <del>.

Contoh penggunaan berpasangan <del> dan <ins>:

<p>
  Harga paket: <del>Rp500.000</del> <ins>Rp350.000</ins>
</p>

Pada contoh di atas, harga lama ditampilkan dengan efek tercoret, sementara harga baru ditampilkan dengan garis bawah — pola yang sangat umum digunakan di situs e-commerce.

Catatan: Hindari menggunakan <u> secara berlebihan pada konten web. Pembaca bisa salah mengira teks bergaris bawah sebagai tautan (link), karena tampilan defaultnya mirip.

Membuat Teks Tercoret dengan dan

Teks tercoret menunjukkan bahwa sebuah informasi sudah tidak relevan atau telah diganti. Dua tag yang bisa digunakan:

• <s> (strikethrough) — mencoret teks yang sudah tidak akurat atau tidak berlaku lagi.
• <del> (delete) — menandai teks yang telah dihapus dari dokumen. Lebih semantik dan sering digunakan bersama <ins>.

Contoh:

<p>
  Stok barang: <s>Tersedia</s> Habis
</p>
<p>
  Jadwal rilis: <del>Maret 2026</del> <ins>April 2026</ins>
</p>

Membuat Pangkat Atas dan Bawah (Superscript & Subscript)

Pangkat digunakan untuk menampilkan karakter kecil di posisi atas atau bawah dari teks normal. Fitur ini penting saat menulis rumus matematika, rumus kimia, atau catatan kaki.

• <sup> (superscript) — pangkat atas. Contoh: m², E=mc², catatan kaki¹.
• <sub> (subscript) — pangkat bawah. Contoh: H₂O, CO₂, O₂.

Contoh penggunaan dalam kode HTML:

<p>
  Luas persegi = S<sup>2</sup>, di mana <i>S</i> adalah panjang sisi.
</p>
<p>
  Rumus air adalah H<sub>2</sub>O dan karbon dioksida adalah CO<sub>2</sub>.
</p>

lihat foto

Menyoroti Teks dengan

Tag <mark> berfungsi seperti stabilo digital — ia menyoroti teks dengan warna latar belakang agar terlihat menonjol. Warna default-nya adalah kuning, tetapi bisa diubah menggunakan CSS.

Contoh dasar:

<p>
  Pastikan kamu sudah menguasai <mark>dasar HTML</mark> sebelum belajar CSS.
</p>

Mengubah Warna Stabilo dengan CSS

Kamu bisa mengganti warna latar <mark> sesuai kebutuhan desain menggunakan properti background-color:

<!-- Stabilo hijau -->
<p>
  Deadline pengumpulan tugas: <mark style="background-color: #90EE90;">30 April 2026</mark>
</p>

<!-- Stabilo pink -->
<p>
  Bagian yang perlu diperbaiki: <mark style="background-color: pink;">paragraf ketiga</mark>
</p>

Text Formatting untuk Kode Program

HTML juga menyediakan tag khusus untuk menampilkan teks yang berhubungan dengan pemrograman dan komputer. Tag-tag ini memberi tampilan monospace (lebar karakter seragam) agar kode lebih mudah dibaca.

Berikut daftar tag yang tersedia:

• <code> — menandai potongan kode program di dalam kalimat. Contoh: gunakan fungsi console.log() untuk mencetak output.
• <pre> — menampilkan teks dengan format asli (preformatted), termasuk spasi dan baris baru. Cocok untuk blok kode multi-baris.
• <kbd> — menandai tombol keyboard. Contoh: tekan Ctrl+S untuk menyimpan.
• <samp> — menandai output atau hasil keluaran dari program komputer.
• <var> — menandai nama variabel dalam konteks pemrograman.

Contoh penggunaan lengkap:

<p>
  Buat variabel <var>name</var> lalu cetak dengan <code>console.log()</code>:
</p>

<pre>
var name = "Belajar HTML";
console.log(name);
</pre>

<p>Output: <samp>Belajar HTML</samp></p>
<p>Tekan <kbd>F5</kbd> untuk menjalankan ulang program.</p>

Menggabungkan Beberapa Format Sekaligus

Format teks di HTML bisa digabungkan. Misalnya, kamu ingin membuat teks yang tebal sekaligus miring, atau tebal dengan garis bawah — cukup tulis tag-tag yang dibutuhkan secara berurutan.

Contoh:

<!-- Tebal + Miring -->
<p><strong><em>Teks ini tebal dan miring.</em></strong></p>

<!-- Tebal + Garis Bawah -->
<p><b><u>Teks ini tebal dan bergaris bawah.</u></b></p>

<!-- Tebal + Miring + Stabilo -->
<p><strong><em><mark>Teks ini tebal, miring, dan distabilo.</mark></em></strong></p>

Aturan Penting: Urutan Penutupan Tag

Saat menggabungkan format, pastikan urutan penutupan tag kebalikan dari urutan pembukaannya. Tag yang dibuka pertama harus ditutup terakhir.

Cara mudah mengingatnya adalah konsep "ibu memasak ubi":

<!-- BENAR: urutan penutupan terbalik -->
<i><b><u>ibu memasak ubi</u></b></i>

<!-- SALAH: urutan penutupan tidak terbalik -->
<i><b><u>ibu memasak ubi</i></b></u>

Pada contoh yang benar: tag <i> dibuka pertama dan ditutup terakhir, tag <u> dibuka terakhir dan ditutup pertama. Pola ini memastikan browser me-render semua format dengan benar.

[Keterangan Gambar: Ilustrasi aturan urutan penutupan tag HTML dengan konsep ibu memasak ubi (aturan nesting tag HTML ibu memasak ubi)] [AI Image Prompt: An educational diagram showing correct HTML tag nesting with the mnemonic "ibu memasak ubi" where opening tags i, b, u are shown on the left and closing tags u, b, i are shown on the right in reverse order, connected by curved arrows, with a green checkmark for correct nesting and red X for incorrect nesting, clean flat design style]

Perbedaan Tag Visual vs Tag Semantik

Dari pembahasan di atas, kamu mungkin bertanya: mengapa ada dua tag untuk fungsi yang sama? Jawabannya terletak pada perbedaan antara tag visual dan tag semantik.

• Tag visual (<b>, <i>, <u>, <s>) — hanya mengubah tampilan teks tanpa memberikan makna tambahan kepada mesin pencari atau screen reader.
• Tag semantik (<strong>, <em>, <ins>, <del>) — mengubah tampilan sekaligus memberikan makna kontekstual. Mesin pencari dan alat bantu aksesibilitas memahami arti dari tag ini.

Rekomendasi: Gunakan tag semantik (<strong> dan <em>) untuk konten artikel dan halaman web. Tag visual lebih cocok digunakan saat kamu murni ingin mengubah tampilan tanpa memengaruhi makna.

Kesimpulan

Text formatting adalah fondasi penting dalam pembuatan konten web. Dengan memahami tag-tag formatting HTML, kamu bisa membuat konten yang lebih mudah dibaca, terstruktur, dan ramah mesin pencari.

Rangkuman yang perlu diingat:

• Gunakan <strong> untuk teks tebal dan <em> untuk teks miring pada konten artikel.
• Pasangan <del> dan <ins> cocok untuk menunjukkan perubahan informasi.
• Tag <sup> dan <sub> digunakan untuk pangkat pada rumus.
• Tag <mark> berfungsi sebagai stabilo digital dengan warna yang bisa dikustomisasi.
• Saat menggabungkan format, ingat aturan "ibu memasak ubi" — tag yang dibuka pertama ditutup terakhir.
• Prioritaskan tag semantik daripada tag visual untuk aksesibilitas dan SEO yang lebih baik.