Heading, Paragraf, dan Formatting Teks
Teks adalah konten paling mendasar di sebuah halaman web. Dalam materi ini, kamu akan belajar bagaimana mengatur judul, paragraf, dan memformat teks agar halaman webmu tertata rapi dan mudah dibaca.
📰 Heading (Judul)
HTML menyediakan 6 level heading dari <h1>
(terbesar) sampai <h6> (terkecil).
Heading digunakan untuk memberi hierarki pada konten — seperti judul dan sub-judul di buku.
<h1>Heading 1 — Judul Utama</h1>
<h2>Heading 2 — Sub-judul</h2>
<h3>Heading 3 — Sub-sub-judul</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>Heading 1 — Judul Utama
Heading 2 — Sub-judul
Heading 3 — Sub-sub-judul
Heading 4
Heading 5
Heading 6
⚠️ Aturan Penting Heading:
- 1. Gunakan hanya satu <h1> per halaman (untuk judul utama/SEO)
- 2. Jangan loncat level — setelah h1, gunakan h2, lalu h3 (bukan h1 → h4)
- 3. Heading bukan untuk membuat teks besar — gunakan CSS untuk styling
📖 Analogi: Heading seperti daftar isi buku. <h1> = judul buku, <h2> = judul bab, <h3> = sub-bab, dst. Google juga membaca heading untuk memahami isi halamanmu (SEO).
📝 Paragraf dan Line Break
Tag <p> digunakan untuk membuat paragraf.
Browser secara otomatis menambahkan jarak (margin) antara setiap paragraf.
<p>Ini adalah paragraf pertama. Browser akan
otomatis menampilkannya dalam satu blok teks.</p>
<p>Ini paragraf kedua. Ada jarak otomatis
antara paragraf pertama dan kedua.</p>
<!-- Line break: pindah baris tanpa paragraf baru -->
<p>
Baris pertama<br>
Baris kedua (masih dalam paragraf yang sama)<br>
Baris ketiga
</p><p>
Membuat paragraf baru dengan jarak atas-bawah. Digunakan untuk blok teks terpisah.
<br>
Pindah baris tanpa jarak paragraf. Tag self-closing (tidak perlu </br>). Cocok untuk alamat atau puisi.
❌ Kesalahan umum: Jangan gunakan banyak <br><br><br>
untuk membuat jarak. Gunakan CSS margin atau
padding sebagai gantinya.
✨ Formatting Teks
HTML menyediakan berbagai tag untuk memformat teks:
| Tag | Fungsi | Hasil |
|---|---|---|
<b> |
Teks tebal (visual only) | Teks tebal |
<strong> |
Teks penting (semantic + tebal) | Teks penting |
<i> |
Teks miring (visual only) | Teks miring |
<em> |
Penekanan (semantic + miring) | Teks ditekankan |
<u> |
Garis bawah | Teks bergaris bawah |
<s> |
Coret (strikethrough) | |
<mark> |
Highlight / stabilo | Teks di-highlight |
<code> |
Kode / monospace | console.log() |
<sub> |
Subscript (teks bawah) | H2O |
<sup> |
Superscript (teks atas) | E = mc2 |
🆚 <strong> vs <b> — <em> vs <i>
Secara visual terlihat sama, tapi punya makna berbeda:
Semantic (Direkomendasikan)
<strong>
Teks ini penting. Screen reader akan membacanya dengan penekanan.
<em>
Teks ini perlu ditekankan. Mengubah intonasi saat dibaca.
Visual Only
<b>
Hanya visual tebal. Tidak ada makna semantik khusus.
<i>
Hanya visual miring. Cocok untuk istilah asing atau judul karya.
✅ Best Practice: Gunakan <strong>
dan <em> karena lebih baik untuk
aksesibilitas (screen reader) dan SEO.
📏 Garis Pemisah & Kutipan
<p>Konten sebelum garis pemisah.</p>
<!-- Horizontal Rule: garis pemisah -->
<hr>
<p>Konten setelah garis pemisah.</p>
<!-- Blockquote: kutipan -->
<blockquote>
"Belajar coding adalah investasi terbaik
untuk masa depanmu."
<footer>— Fullstack Talent</footer>
</blockquote>Konten sebelum garis pemisah.
Konten setelah garis pemisah.
"Belajar coding adalah investasi terbaik untuk masa depanmu."
💻 Contoh Lengkap: Artikel Blog
Mari kombinasikan semua yang sudah dipelajari dalam sebuah contoh nyata:
<h1>Belajar HTML untuk Pemula</h1>
<p>
HTML adalah <strong>bahasa markup</strong> yang menjadi
fondasi dari <em>setiap</em> halaman web di internet.
</p>
<h2>Apa yang Perlu Diketahui?</h2>
<p>
Kamu perlu memahami tag <code><html></code>,
<code><head></code>, dan
<code><body></code> sebagai dasar.
</p>
<blockquote>
"Semua expert dulunya pemula."
</blockquote>
<hr>
<h2>Catatan Penting</h2>
<p>
Harga kursus: <s>Rp 500.000</s>
<mark>GRATIS!</mark>
</p>Belajar HTML untuk Pemula
HTML adalah bahasa markup yang menjadi fondasi dari setiap halaman web di internet.
Apa yang Perlu Diketahui?
Kamu perlu memahami tag <html>,
<head>, dan
<body> sebagai dasar.
"Semua expert dulunya pemula."
Catatan Penting
Harga kursus: Rp 500.000 GRATIS!
🔤 Preformatted Text & Special Characters
<pre>
Mempertahankan spasi dan line break persis seperti yang ditulis:
Baris 1
Baris 2 (indent)
Baris 3 (double indent)
Special Characters
<
→ < (kurang dari)
>
→ > (lebih dari)
&
→ & (ampersand)
→ spasi yang tidak bisa dipotong
©
→ © (copyright)
📋 Ringkasan
<h1>
sampai <h6> — heading untuk hierarki
konten. Gunakan hanya satu <h1> per halaman
<p>
untuk paragraf, <br> untuk pindah
baris
<strong> dan <em> daripada <b> dan <i> —
lebih baik untuk SEO & aksesibilitas
<mark>
untuk highlight, <s> untuk coret, <code> untuk kode
<hr>
untuk garis pemisah, <blockquote> untuk
kutipan