HTML Formatting
Bab 1: Visual vs Semantik (Wajib Paham)
Dalam HTML, ada banyak cara untuk membuat teks menjadi tebal atau miring. Namun, developer profesional harus memahami perbedaan antara Gaya Visual (tampilan mata) dan Makna Semantik (arti bagi mesin).
HTML menyediakan elemen khusus untuk mendefinisikan teks dengan makna khusus, seperti "teks penting", "teks yang salah", atau "teks yang ditekankan".
💡 Filosofi HTML5:
HTML digunakan untuk mendefinisikan STRUKTUR dan ARTI. Jika Anda hanya ingin mengubah tampilan (misal: menebalkan huruf hanya untuk kosmetik), gunakan CSS. Gunakan tag formatting jika teks tersebut memang memiliki arti khusus.
Bab 2: Teks Tebal (Bold & Strong)
Ada dua cara untuk menebalkan huruf, namun fungsinya berbeda secara teknis.
<b> (Bold)
Membuat teks menjadi tebal secara visual TANPA memberikan penekanan penting. Gunakan ini untuk kata kunci atau nama produk yang ingin ditonjolkan secara visual saja.
<b>Teks Tebal</b>
<strong> (Important)
Membuat teks menjadi tebal DAN memberitahu browser/Google bahwa teks ini SANGAT PENTING. Pembaca layar (Screen Reader) akan membacanya dengan nada yang lebih tegas.
<strong>PERINGATAN!</strong>
Perbandingan Visual (Sama Saja):
<p>Ini teks biasa.</p>
<p><b>Ini teks bold (b).</b></p>
<p><strong>Ini teks strong (penting).</strong></p>Bab 3: Teks Miring (Italic & Emphasized)
Sama seperti tebal, teks miring juga memiliki dua varian.
<i> (Italic)
Membuat teks miring secara visual. Biasanya digunakan untuk istilah asing, nama kapal, atau pemikiran teknis. Tidak ada penekanan makna.
<em> (Emphasized)
Membuat teks miring DAN memberikan penekanan suara (stress emphasis). "Saya sangat lapar" berbeda dengan "Saya sangat lapar".
<p><i>Homo Sapiens</i> adalah nama ilmiah manusia.</p>
<p>Kamu <em>harus</em> belajar sekarang!</p>Bab 4: Teks Kecil & Highlight
HTML juga menyediakan tag untuk format spesifik lainnya:
- <small>: Membuat teks menjadi lebih kecil. Sering digunakan untuk tulisan hak cipta (copyright) atau catatan kaki.
- <mark>: Memberikan latar belakang kuning (highlight) seolah-olah ditandai dengan stabilo. Digunakan untuk menyoroti kata kunci hasil pencarian.
<h2>HTML <small>Tutorial</small></h2>
<p>Jangan lupa <mark>simpan file</mark> kamu.</p>Bab 5: Coretan & Revisi (Del & Ins)
Elemen ini sangat berguna untuk menampilkan perubahan data, seperti harga diskon atau revisi dokumen.
<del> (Deleted)
Menampilkan teks yang dicoret (strikethrough). Menandakan data yang sudah dihapus atau tidak berlaku lagi.
<ins> (Inserted)
Menampilkan teks dengan garis bawah (underline). Menandakan data baru yang ditambahkan.
Contoh Harga Diskon:
<p>Harga Normal: <del>Rp 100.000</del></p>
<p>Harga Promo: <ins>Rp 50.000</ins></p>Bab 6: Subscript & Superscript
Digunakan untuk penulisan rumus kimia atau matematika.
- <sub> (Subscript): Huruf kecil di bawah garis (Contoh: H₂O).
- <sup> (Superscript): Huruf kecil di atas garis (Contoh: E=mc²).
<p>Air adalah H<sub>2</sub>O.</p>
<p>Luas = panjang<sup>2</sup></p>⚡ Proyek Kilat: Kartu Produk Diskon
Misi kamu adalah membuat tampilan kartu produk sederhana yang sedang diskon. Gunakan tag formatting yang tepat untuk menunjukkan urgensi dan perubahan harga.
🎯 Target Misi:
- ✅ Buat teks paragraf: "Laptop Gaming" dengan format
<strong>. - ✅ Di bawahnya, buat harga lama "Rp 15.000.000" yang dicoret menggunakan
<del>. - ✅ Di sebelahnya, buat harga baru "Rp 12.000.000" yang digarisbawahi
<ins>atau ditebalkan. - ✅ Tambahkan catatan kecil di bawah: "Syarat & ketentuan berlaku" menggunakan
<small>.
Pusat Dokumentasi Developer
Jangan hafalkan kodenya, cukup pahami logikanya. Kalau kamu butuh jawaban cepat saat lagi ngoding, kamu bisa intip dokumentasi teknis di bawah ini:
Layanan & Jasa
Fondasi Utama
Visual & Media
Alat Bantu Dev
Standar Global
Langkah Selanjutnya
Teks sudah diformat dengan baik. Selanjutnya, kita akan belajar cara menyisipkan Kutipan (Quotations) dan referensi dari sumber lain secara profesional.
INSPIRED BY GLOBAL WEB STANDARDS • POWERED BY CODIVAY
Lanjut ke HTML Quotations »