Bab 10: Memformat Teks HTML agar Mudah Dibaca
Pernah nggak sih, pas nulis konten web, kamu pengen teksnya jadi tebal biar penting, miring biar dramatis, atau disorot kayak lagi di ujian nasional?
Kalau iya selamat, kamu udah masuk ke dunia HTML text formatting atau memformat teks HTMl. Dan tenang aja, ini bukan soal ngetik pake font Comic Sans sambil nangis karena deadline.
Formatting text atau teks yang terformat di HTML itu kayak bumbu dapur, sedikit aja, tapi bikin makanan jadi lebih enak. Nggak cuma soal tampilan, tapi juga makna. Karena di dunia web, tebal itu nggak cuma gede tapi bisa juga berarti “INI PENTING BANGET, BOS!”
Artikel ini bakal bawa kamu jalan-jalan mengenal tag-tag formatting HTML yang sering dipake mulai dari yang simpel kayak <b> sampe yang jarang tapi keren kayak <mark>. Semua dijelasin santai ala warkop karena coding aja udah susah, masa bacanya harus kaku.
Apa Itu HTML Text Formatting
HTML itu bukan cuma soal <div> dan <p>. Dia juga punya cara buat kasih “emosi” ke teks, tanpa emoji, tanpa caps lock, tapi tetap powerful.
Formatting di sini artinya mengubah tampilan atau makna teks biar lebih informatif. Misalnya:
- Teks tebal buat judul penting
- Teks miring buat istilah asing
- Teks dicoret buat tunjukin harga lama
Dan yang keren HTML nggak cuma ngasih gaya, tapi juga ngasih konteks ke mesin pencari dan pembaca layar. Jadi, ini bukan cuma soal keliatan cakep, tapi juga aksesibilitas dan SEO. Keren, kan?
Daftar Tag Formatting yang Biasa Dipakai
Berikut tag formatting yang sering muncul di kehidupan sehari-hari developer web:
- <b> tebal (visual aja)
- <strong> tebal + artinya penting
- <i> miring (visual)
- <em> miring + penekanan emosional
- <small> teks kecil
- <mark> highlight kayak pake stabilo
- <del> teks dicoret (dihapus)
- <ins> teks ditambahkan (baru)
- <sub> subscript (bawah)
- <sup> superscript (atas)
Semuanya inline element, artinya mereka jalan di tengah kalimat tanpa bikin baris baru. Lancar kayak ojol lewat gang sempit.
Bikin Teks Tebal dengan <b> dan <strong>
Ini mirip, tapi beda makna!
<p>Aku <b>tebal</b> cuma buat tampilan.</p>
<p>Aku <strong>tebal</strong> karena ini PENTING!</p>- <b> murni gaya. Browser tampilin tebal, tapi mesin pencari nggak anggap itu istimewa.
- <strong> selain tebal, dia seperti bilang ke pembaca “AYO PERHATIKAN INI!”
Kalau kamu nulis peringatan, kesimpulan, atau poin krusial, pilih <strong>. Kalau cuma buat efek visual (misal, nama produk), <b> boleh dipake—tapi jangan berlebihan.
Bikin Teks Miring dengan <i> dan <em>
Sama kayak tebal, miring juga punya dua versi:
<p>Judul film <i>Inception</i> keren banget.</p>
<p>Kamu <em>benar-benar</em> harus coba kodenya!</p><i>: buat istilah asing, judul karya, atau gaya visual.<em>: buat penekanan. Kalau dibaca pake pembaca layar, biasanya nadanya berubah!
Jadi, kalau maksudnya “aku sangat setuju”, pake <em>. Kalau cuma ngasih tahu itu nama kapal, <i> cukup.
Teks Kecil dengan <small>
Buat catatan kaki, syarat & ketentuan, atau disclaimer yang nggak perlu “teriak”:
<p>Harga promo berlaku hari ini! <small>*Syarat dan ketentuan berlaku.</small></p><small> nggak cuma bikin teks kecil, dia juga ngasih sinyal ke browser: “Ini info sekunder, jangan terlalu difokusin.” Tapi tetap dibaca, ya. Jangan sampe pake ukuran 6px itu sih kejam.
Highlight Teks dengan <mark>
Mau bikin teks keliatan kayak disorot pake stabilo kuning? Ini dia:
<p>Cari kata kunci: <mark>HTML formatting</mark> di halaman ini.</p><mark> itu keren buat:
- Hasil pencarian
- Kutipan penting
- Poin yang harus disorot
Warnanya default kuning, tapi bisa diubah pake CSS kalau mau. Tapi ingat jangan highlight semua teks. Nanti jadi kayak halaman buku yang udah dipinjam anak kuliahan penuh coretan!
Teks yang Dihapus / Ditambahkan <del> dan <ins>
Buat tunjukin perubahan konten, misal revisi harga atau update kebijakan:
<p>Harga lama: <del>Rp 100.000</del></p>
<p>Harga baru: <ins>Rp 75.000</ins></p><del>teks dicoret (artinya: udah nggak berlaku)<ins>teks baru (biasanya digarisbawahin)
Browser tampilin otomatis, dan pembaca langsung ngerti ada perubahan. Rapi, jelas, dan profesional!
Subscript & Superscript (<sub> dan <sup>)
Suka nulis rumus, footnote, atau pangkat? Ini senjatamu:
<p>Air itu H<sub>2</sub>O, bukan H2O tanpa gaya.</p>
<p>E = mc<sup>2</sup> — Einstein emang jenius.</p>
<p>Lihat catatan kaki nomor <sup>3</sup>.</p><sub>huruf/angka kecil di bawah<sup>huruf/angka kecil di atas
Berguna banget buat konten edukasi, teknis, atau ilmiah. Dan bonus: bikin tulisanmu keliatan “pinter” secara otomatis.
Contoh Lengkap Semua Tag Formatting
Berikut contoh gabungan yang bisa kamu coba langsung:
<!DOCTYPE html>
<html>
<head>
<title>Contoh Text Formatting</title>
</head>
<body>
<p>
Ini contoh teks dengan berbagai format:<br>
- <b>Tebal biasa</b> dan <strong>tebal penting</strong><br>
- <i>Miring biasa</i> dan <em>miring penekanan</em><br>
- Teks <small>kecil buat catatan</small><br>
- Kata kunci: <mark>highlight</mark><br>
- Harga lama: <del>Rp 50.000</del>, harga baru: <ins>Rp 35.000</ins><br>
- Rumus: CO<sub>2</sub> dan x<sup>2</sup>
</p>
</body>
</html>Salin, simpan sebagai .html, lalu buka di browser. Lihat semua efeknya langsung!
Ringkasan Singkat Buat Kamu Langsung Praktik!
| Tag | Fungsi | Kapan Dipake? |
|---|---|---|
<b> | Teks tebal (visual) | Efek tampilan aja |
<strong> | Teks tebal + penting | Poin krusial, peringatan |
<i> | Teks miring (visual) | Judul, istilah asing |
<em> | Teks miring + penekanan | Penekanan emosional |
<small> | Teks kecil | Disclaimer, catatan kaki |
<mark> | Highlight | Sorotan, hasil pencarian |
<del> | Teks dicoret | Konten lama/harga lama |
<ins> | Teks baru (garis bawah) | Update, revisi |
<sub> | Subscript | Rumus kimia, indeks |
<sup> | Superscript | Pangkat, footnote |
Ingat: formatting bukan cuma soal gaya tapi juga makna dan aksesibilitas. Jadi, pilih tag yang sesuai tujuanmu, bukan cuma yang keliatan keren.
Nah, sekarang kamu udah punya senjata lengkap buat bikin teks di HTML yang nggak cuma jelas, tapi juga punya “jiwa”.
Dari tebal, miring, sampe yang disorot kayak jawaban ujian, semua udah kamu kuasai. Dan yang paling penting kamu belajar dengan cara yang benar, bukan asal tempel dari Stack Overflow tanpa ngerti bedanya <b> dan <strong>.
Kalau nanti kamu lanjut ke CSS atau integrasi dengan bahasa bahasa backend, formatting ini bakal jadi pondasi yang kuat.
Kamu bisa lihat daftar isi lengkap belajar HTML untuk pemula disini.