Belajar Pemformatan Teks HTML dengan Mudah dan Lengkap

Memformat teks di HTML adalah keterampilan mendasar yang harus dikuasai oleh siapa pun yang ingin membuat atau mengedit halaman web. Artikel ini membahas semua tag teks penting dalam HTML, bagaimana cara menggunakan masing-masing tag dengan tepat, serta contoh nyata sehingga kamu tidak hanya tahu tagnya, tetapi juga tahu kapan dan mengapa harus digunakan.

---

Apa Itu Pemformatan Teks HTML?

Pemformatan teks dalam HTML adalah cara kita memberi tahu browser bagaimana menampilkan teks secara visual dan maknanya secara semantik. Ini berbeda dengan styling (yang dilakukan oleh CSS) — HTML hanya menyatakan struktur dan makna konten.

Contohnya, teks yang penting secara makna harus dibungkus dengan tag yang semantik agar mesin pencari atau pembaca dengan alat bantu bisa memahaminya dengan benar. Untuk memperdalam konsep HTML, kamu bisa membaca artikel Apa Itu HTML dan Fungsinya.

---

Tag Dasar untuk Pemformatan Teks

Teks Tebal: <b> dan <strong>

Keduanya terlihat sama — menebalkan teks — tetapi memiliki makna yang berbeda:

• <b>: hanya menebalkan teks tanpa makna semantik tambahan.
• <strong>: menandakan bahwa teks ini penting secara konteks.

Contoh:

<p>Ini adalah <b>teks tebal biasa</b>.</p>
<p>Ini adalah <strong>teks penting</strong>.</p>

Sekarang kamu bisa lihat perbedaannya sendiri saat tampil di browser.

---

Teks Miring: <i> dan <em>

Sama seperti di atas, kedua tag ini terlihat mirip, tetapi memiliki tujuan berbeda:

• <i>: hanya membuat teks miring.
• <em>: memberikan penekanan semantik di dalam konteks.

Contoh:

<p>Ini adalah <i>teks miring</i> biasa.</p>
<p>Ini adalah <em>teks yang mendapat penekanan</em> dalam kalimat.</p>

---

Garis Bawah dan Sorotan: <u> dan <mark>

Tag ini digunakan untuk:

• <u>: memberi garis bawah pada teks.
• <mark>: menandai teks sebagai sorotan (highlight), sering digunakan untuk teks penting.

Contoh:

<p>Teks ini <u>digarisbawahi</u>.</p>
<p>Teks ini <mark>disorot</mark> untuk perhatian pembaca.</p>

---

Teks Kecil dan Spesial: <small>, <sub>, dan <sup>

Tag ini digunakan untuk menampilkan teks dengan ukuran atau posisi khusus di dalam konten:

• <small>: membuat teks dengan ukuran lebih kecil.
• <sub>: membuat teks subskrip (contoh H₂O).
• <sup>: membuat teks superskrip (contoh E = mc²).

Contoh:

<p>Ukuran <small>kecil</small> bisa membantu catatan kaki.</p>
<p>Contoh subskrip: H<sub>2</sub>O adalah air.</p>
<p>Contoh superskrip: E = mc<sup>2</sup>.</p>

---

Perbedaan Semantik vs. Styling

Perlu dipahami bahwa HTML berfokus pada semantik — memberi makna konten — sedangkan CSS berfokus pada penampilan visual.

Contohnya, menebalkan teks dengan CSS menggunakan font-weight: bold; tidak memberi makna penting secara semantik, sementara <strong> memberi tahu mesin pencari bahwa teks itu penting.

Kalau kamu ingin mempelajari lebih jauh tentang bagaimana CSS bekerja dengan HTML, baca artikel Cara Menggunakan CSS untuk Mempercantik HTML.

---

Tag yang Sering Dipasangkan dengan Pemformatan Teks

Dalam prakteknya, berbagai tag HTML biasanya dipasangkan untuk menyusun teks di halaman web dengan lebih kaya, seperti:

• <h1>–<h6> – digunakan untuk judul dan subjudul.
• <p> – untuk paragraf teks.
• <a> – untuk tautan (link) di dalam teks.

Artikel lanjutan seperti Panduan Lengkap Belajar Tag Dasar HTML membahas hal ini secara menyeluruh.

---

Kesalahan yang Sering Terjadi Pemula

Berikut beberapa kesalahan umum saat memformat teks HTML dan cara memperbaikinya:

• Tag tidak tertutup – Sebuah tag harus memiliki penutup jika digunakan secara berpasangan (<b>…</b>).
• Menggunakan tag visual sebagai semantik – Hindari gunakan <b> hanya untuk gaya, gunakan <strong> jika teks memiliki makna penting.
• Terlalu banyak tag sekaligus – Ini membuat HTML sulit dibaca dan dipelihara.

Kalau kamu menemui HTML tidak tampil sesuaiku harapkan, artikel Cara Memperbaiki Kesalahan pada HTML dapat membantu.

---

Kesimpulan

Pemformatan teks HTML bukan sekadar membuat teks terlihat berbeda. Ini tentang memberi makna yang tepat sehingga browser menampilkan teks dengan benar, pembaca mudah memahami isi halaman, dan mesin pencari dapat menilai kualitas konten dengan akurat.

Setelah kamu menguasai pemformatan teks, langkah berikutnya bisa mempelajari struktur konten yang lebih besar seperti heading, paragraf, dan layout halaman.

Berbagi :