Setelah belajar heading dan paragraf, sekarang saatnya membuat teks kita lebih hidup dan ekspresif. Pernahkah kamu ingin menebalkan kata tertentu, memiringkan kalimat, atau menggarisbawahi judul? HTML punya solusinya!
Mengapa Perlu Memformat Teks?
Formatting teks membantu pembaca menangkap poin penting dan membuat halaman web lebih mudah dibaca. Bayangkan membaca buku tanpa ada huruf tebal atau miring — pasti membosankan, kan?
Daftar Tag Formatting Teks
| Tag | Fungsi | Contoh Hasil |
|---|---|---|
<b> |
Tebal (visual saja) | Teks tebal |
<strong> |
Tebal + makna penting (SEO/screen reader) | Teks penting |
<i> |
Miring (visual saja) | Teks miring |
<em> |
Miring + penekanan (emphasis) | Teks ditekankan |
<u> |
Garis bawah | Teks bergaris bawah |
Perbedaan <b> vs <strong>
Ini yang sering membingungkan pemula. Secara tampilan sama-sama tebal. Tapi secara makna berbeda:
<b> (Bold)
Hanya gaya visual. Tidak ada makna khusus.
Contoh: "Harga Rp 50.000 (diskon 20%)"
Screen reader tidak memberi penekanan khusus.
<strong> (Strong)
Menunjukkan makna penting/serius.
Contoh: "Jangan lupa matikan kompor setelah memasak!"
Screen reader akan memberi penekanan suara.
<strong> untuk kata kunci penting yang ingin kamu tekankan di mesin pencari. Google menganggapnya lebih berbobot daripada <b>.
Perbedaan <i> vs <em>
Sama seperti bold, <i> dan <em> juga punya perbedaan makna:
<i> (Italic)
Hanya gaya visual miring. Biasanya untuk:
- Istilah asing (bon appétit)
- Judul buku/film (Harry Potter)
- Nama ilmiah (Homo sapiens)
<em> (Emphasis)
Memberi penekanan suara saat dibaca.
Contoh: "Aku sangat suka bakso!"
Bayangkan kata "sangat" diucapkan dengan nada lebih tegas.
Studi Kasus: Review Restoran
Buat file review-restoran.html dan coba praktikkan semua tag formatting:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Review Restoran - Warung Kita</title>
</head>
<body>
<h1>Review: <i>Warung Kita</i> - Makanan Enak di Tengah Kota</h1>
<p><strong>Peringatan:</strong> Artikel ini akan membuatmu lapar!</p>
<h2>Sambutan Pemilik</h2>
<p>Pemilik warung, Pak Budi, menyambut kami dengan <em>sangat ramah</em>.
Beliau bahkan <u>memberikan tambahan sambal gratis</u> untuk kami.</p>
<h2>Menu Andalan</h2>
<p>Kami memesan <strong>nasi goreng spesial</strong> dan <strong>es teh manis</strong>.
Rasanya <em>luar biasa lezat</em>! Bumbunya meresap sempurna.</p>
<p>Harga yang ditawarkan juga <u>sangat bersahabat</u> di kantong mahasiswa.
Nasi goreng hanya <b>Rp 15.000</b> dan es teh <b>Rp 5.000</b>.</p>
<h2>Kesimpulan</h2>
<p><strong>Warung Kita</strong> adalah <em>rekomendasi wajib</em> untuk pecinta
masakan rumahan. Kami <u>pasti akan kembali lagi</u>! <b>Nilai: 9/10</b></p>
</body>
</html>
Hasil yang akan kamu lihat di browser:
Review: Warung Kita - Makanan Enak di Tengah Kota
Peringatan: Artikel ini akan membuatmu lapar!
Sambutan Pemilik
Pemilik warung, Pak Budi, menyambut kami dengan sangat ramah. Beliau bahkan memberikan tambahan sambal gratis untuk kami.
Menu Andalan
Kami memesan nasi goreng spesial dan es teh manis. Rasanya luar biasa lezat! Bumbunya meresap sempurna.
Harga yang ditawarkan juga sangat bersahabat di kantong mahasiswa. Nasi goreng hanya Rp 15.000 dan es teh Rp 5.000.
Kesimpulan
Warung Kita adalah rekomendasi wajib untuk pecinta masakan rumahan. Kami pasti akan kembali lagi! Nilai: 9/10
Kombinasi Tag (Nested Formatting)
Kamu bisa menggabungkan beberapa tag sekaligus untuk efek lebih kuat:
<p>
<strong><em><u>PENTING BANGET!</u></em></strong>
Jangan lupa subscribe blog ini!
</p>
Hasilnya:
PENTING BANGET! Jangan lupa subscribe blog ini!
<strong><em>teks</em></strong> (benar) bukan
<strong><em>teks</strong></em> (salah).
Tag Formatting Lainnya (Bonus)
Selain 5 tag utama di atas, ada beberapa tag formatting lain yang mungkin berguna:
| Tag | Fungsi | Contoh |
|---|---|---|
<mark> |
Menyorot teks (seperti stabilo) | teks disorot |
<small> |
Teks lebih kecil (footer, disclaimer) | teks kecil |
<del> |
Teks dicoret (menunjukkan revisi) | |
<ins> |
Teks disisipkan (biasanya bergaris bawah) | Rp 75.000 |
<sup> |
Superskrip (pangkat) | E=mc2 |
<sub> |
Subskrip (rumus kimia) | H2O |
Kesalahan Umum Pemula
- Lupa menutup tag →
<strong>teks(harusnya</strong>) - Menumpuk tag terlalu banyak → Membaca jadi sulit, gunakan secukupnya
- Menggunakan
<b>untuk semua yang tebal → Gunakan<strong>untuk hal penting - Menggunakan
<u>untuk link → Link sudah otomatis bergaris bawah,<u>lebih cocok untuk penekanan lain
Latihan Singkat
- Buat file HTML baru dengan judul "5 Makanan Favoritku"
- Gunakan
<h1>untuk judul utama - Buat daftar 5 makanan (gunakan paragraf atau list)
- Tebalkan (
<strong>) nama makanan yang paling kamu suka - Miringkan (
<em>) alasan mengapa kamu suka makanan tersebut - Garisbawahi (
<u>) harga atau tempat membelinya - Simpan dan buka di browser
Intisari Hari Ini
<b>= tebal visual |<strong>= tebal + penting<i>= miring visual |<em>= miring + penekanan<u>= garis bawah (hati-hati jangan tertukar dengan link)- Bisa menggabungkan beberapa tag (nested formatting)
- Tag formatting membantu SEO dan pengalaman membaca
<b>, <strong>, <i>, <em>, <u>, <mark>, <small>, <del>, <sup>, <sub>). Bagikan ke grup belajarmu!
Artikel Sebelumnya: HTML Dasar #3 - Tag Heading (h1-h6) dan Paragraf (p)
Artikel Selanjutnya: HTML Dasar #5 - Komentar di HTML: Untuk Catatan dan Debugging