Panduan Lengkap Formatting Teks HTML: Perbedaan b, strong, i, em, u, mark, dan small

Dalam proses membangun website, struktur saja tidak cukup. Setelah memahami struktur dasar HTML, langkah berikutnya adalah memahami bagaimana cara memformat teks agar lebih jelas, menarik, dan memiliki makna yang tepat secara semantik.

Pada artikel ini kita akan membahas secara mendalam tag formatting teks HTML seperti b, strong, i, em, u, mark, dan small. Kita tidak hanya membahas cara pakainya, tetapi juga kapan sebaiknya digunakan, perbedaan semantik, dampaknya terhadap SEO, serta praktik terbaik yang benar.

Jika Anda masih baru dalam dunia HTML, Anda bisa memulai dari apa itu HTML dan fungsinya atau membaca memahami HTML dari dasar sebelum masuk lebih dalam.

---

Mengapa Formatting Teks Itu Penting?

Formatting teks bukan sekadar membuat tulisan menjadi tebal atau miring. Formatting membantu:

• Menekankan informasi penting
• Membantu pembaca memahami struktur isi
• Meningkatkan keterbacaan
• Meningkatkan makna semantik untuk mesin pencari

Jika Anda sudah membaca panduan paragraf HTML dan panduan headings HTML, maka formatting teks adalah lapisan berikutnya dalam menyusun konten yang rapi.

---

1. Tag <b> (Bold Tanpa Makna Khusus)

Tag <b> digunakan untuk membuat teks menjadi tebal secara visual, tetapi tidak memiliki makna penting secara semantik.

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

Gunakan b jika Anda hanya ingin efek visual tanpa penekanan makna khusus.

Namun dalam praktik modern, untuk penekanan penting lebih disarankan menggunakan strong.

---

2. Tag <strong> (Penekanan Penting)

Tag <strong> menunjukkan bahwa teks tersebut memiliki tingkat kepentingan tinggi.

<p><strong>Peringatan:</strong> Jangan membagikan password Anda.</p>

Perbedaan utama dengan b adalah:

• b → hanya visual
• strong → memiliki makna penting

Dalam konteks SEO, strong lebih baik untuk menekankan kata kunci secara natural.

---

3. Tag <i> (Italic Visual)

Tag <i> digunakan untuk membuat teks miring tanpa makna tambahan.

<p>Film itu berjudul <i>Inception</i>.</p>

Biasanya digunakan untuk:

• Judul buku atau film
• Istilah asing
• Nama ilmiah

---

4. Tag <em> (Emphasis / Penekanan)

Tag <em> memberikan penekanan pada kata tertentu dan memiliki makna semantik.

<p>Saya <em>sangat</em> merekomendasikan belajar HTML dari dasar.</p>

Perbedaan dengan i:

• i → hanya miring visual
• em → penekanan makna

---

5. Tag <u> (Underline)

Tag <u> digunakan untuk menggarisbawahi teks.

<p>Ini adalah <u>contoh teks bergaris bawah</u>.</p>

Namun hati-hati, karena underline sering diasosiasikan dengan link. Untuk styling modern, biasanya lebih baik menggunakan CSS seperti pada cara menggunakan CSS untuk mempercantik website.

---

6. Tag <mark> (Highlight)

Tag <mark> digunakan untuk menandai teks seperti disorot stabilo.

<p>HTML adalah <mark>bahasa dasar</mark> untuk membuat website.</p>

Sangat berguna untuk:

• Menyorot hasil pencarian
• Menekankan poin penting
• Membantu pembaca fokus

---

7. Tag <small> (Teks Kecil)

Tag <small> digunakan untuk teks dengan ukuran lebih kecil, biasanya untuk keterangan tambahan.

<p>Harga: Rp100.000 <small>belum termasuk pajak</small></p>

Biasanya dipakai untuk:

• Disclaimer
• Catatan kaki
• Keterangan tambahan

---

Formatting Teks dan Struktur Konten yang Benar

Formatting tidak berdiri sendiri. Ia harus menyatu dengan:

• elemen HTML
• atribut HTML
• tag dasar HTML

Jika digabungkan dengan benar, maka website Anda akan:

• Lebih profesional
• Lebih mudah dibaca
• Lebih SEO friendly
• Lebih mudah dikembangkan dengan JavaScript atau framework seperti React, Angular, dan Vue

---

Kesalahan Umum dalam Formatting Teks

• Menggunakan b untuk semua penekanan
• Terlalu banyak strong dalam satu paragraf
• Menggunakan u untuk link palsu
• Tidak konsisten dalam penggunaan tag

Jika terjadi error struktur, Anda bisa membaca cara memperbaiki kesalahan pada HTML.

---

Hubungan Formatting dengan Pengembangan Website

Formatting teks hanyalah bagian kecil dari perjalanan Anda membangun website.

Setelah memahami ini, Anda bisa lanjut ke:

• Panduan membuat website dengan HTML
• Perbedaan HTML, CSS, dan JavaScript
• Dari nol sampai bikin website sendiri

Semua materi ini akan membentuk fondasi kuat untuk menjadi developer yang benar-benar memahami struktur, bukan sekadar menyalin kode.

---

Kesimpulan

Tag formatting teks seperti b, strong, i, em, u, mark, dan small memiliki fungsi yang berbeda meskipun terlihat mirip secara visual.

Memahami perbedaan visual dan semantik adalah langkah penting dalam membangun website yang rapi, profesional, dan SEO friendly.

Jika Anda ingin benar-benar menguasai HTML secara menyeluruh, pastikan Anda mempelajari seluruh rangkaian materi HTML di blog ini secara berurutan. Dengan begitu, Anda tidak hanya tahu cara menulis kode, tetapi juga memahami alasan di balik setiap struktur yang dibuat.

Berbagi :