Heading, Paragraf, dan Format Teks dalam HTML
Heru Iryanto
Teacher, Content Creator and Full-Stack Developer
Dalam proses belajar HTML untuk pemula, memahami heading, paragraf, dan format teks dalam HTML adalah langkah penting agar website yang Anda buat terlihat terstruktur, rapi, dan profesional.
Banyak pemula hanya fokus membuat tulisan tampil besar atau kecil. Padahal, dalam HTML, penggunaan tag yang benar bukan hanya soal tampilan, tetapi juga soal struktur dan SEO (Search Engine Optimization).
Artikel ini akan membahas secara lengkap cara menggunakan heading HTML, paragraf HTML, dan berbagai elemen format teks dengan benar.
1️⃣ Heading dalam HTML (<h1> sampai <h6>)
Heading adalah judul atau subjudul dalam sebuah halaman website.
HTML menyediakan 6 level heading:
<h1>Judul Utama</h1>
<h2>Sub Judul</h2>
<h3>Sub Bagian</h3>
<h4>Judul Kecil</h4>
<h5>Judul Lebih Kecil</h5>
<h6>Judul Paling Kecil</h6>
Fungsi Heading dalam HTML
- Membuat struktur konten lebih jelas
- Membantu pembaca memahami hierarki informasi
- Membantu Google memahami isi halaman (penting untuk SEO)
Aturan SEO untuk Heading
✅ Gunakan h1 hanya satu kali dalam satu halaman
✅ Gunakan h2 untuk subjudul utama
✅ Gunakan h3 untuk bagian di bawah h2
❌ Jangan gunakan heading hanya untuk memperbesar teks
Contoh struktur yang benar:
<h1>Belajar HTML untuk Pemula</h1>
<h2>Apa Itu HTML?</h2>
<h2>Struktur Dasar HTML</h2>
<h3>Penjelasan Tag Head</h3>
Struktur seperti ini membuat website lebih ramah mesin pencari.
2️⃣ Paragraf dalam HTML (<p>)
Tag <p> digunakan untuk membuat paragraf.
Contoh:
<p>HTML adalah bahasa markup yang digunakan untuk membuat struktur website.</p>
<p>Semua website di internet menggunakan HTML sebagai fondasi utamanya.</p>
Tips Menggunakan Paragraf
- Gunakan satu ide utama dalam satu paragraf
- Jangan membuat paragraf terlalu panjang
- Gunakan line break jika diperlukan
3️⃣ Line Break dan Horizontal Line
Line Break (<br>)
Digunakan untuk pindah baris tanpa membuat paragraf baru. Contoh :
<p>Belajar HTML itu mudah.<br>
Asalkan konsisten latihan.</p>
Horizontal Line (<hr>)
Digunakan untuk membuat garis pemisah.
<hr>
Cocok untuk memisahkan bagian konten.
4️⃣ Format Teks dalam HTML
Selain heading dan paragraf, HTML juga menyediakan berbagai tag untuk memformat teks.
Teks Tebal
<b>Teks Tebal</b>
<strong>Teks Penting</strong>
Perbedaan:
<b>hanya visual<strong>memiliki makna penting (lebih baik untuk SEO)
Teks Miring
<i>Teks Miring</i>
<em>Teks Penekanan</em>
Perbedaan:
<i>hanya gaya<em>memiliki makna penekanan
Garis Bawah
<u>Teks Bergaris Bawah</u>
Teks Dicoret
<s>Teks Dicoret</s>
Superscript dan Subscript
<p>Rumus air: H<sub>2</sub>O</p>
<p>10<sup>2</sup> = 100</p>
Contoh Struktur Teks HTML yang Baik
<h1>Belajar HTML Dasar</h1>
<p>HTML adalah <strong>fondasi utama</strong> dalam pembuatan website.</p>
<h2>Mengapa Harus Belajar HTML?</h2>
<p>Karena semua website menggunakan HTML sebagai struktur dasarnya.</p>
<hr>
<p><em>Mulai dari sekarang, biasakan menulis struktur yang rapi.</em></p>
Kesalahan Umum Pemula
❌ Menggunakan <br> berlebihan untuk jarak
❌ Tidak menggunakan heading secara berurutan
❌ Menggunakan <b> untuk semua teks penting
❌ Tidak memahami perbedaan strong dan em
Kenapa Heading dan Paragraf Penting untuk SEO?
Google membaca struktur website berdasarkan:
- h1 sebagai topik utama
- h2 sebagai subtopik
- h3 sebagai bagian detail
- Paragraf sebagai isi konten
Jika struktur berantakan, Google sulit memahami isi halaman.
Karena itu, dalam belajar HTML dasar, memahami heading dan paragraf adalah langkah krusial.
Kesimpulan
Heading, paragraf, dan format teks dalam HTML bukan hanya soal tampilan. Ini adalah dasar dari struktur website yang profesional dan SEO-friendly.
Dengan menggunakan <h1> sampai <h6>, <p>, serta elemen format teks dengan benar, website Anda akan:
- Lebih rapi
- Lebih mudah dibaca
- Lebih profesional
- Lebih ramah mesin pencari
Di materi berikutnya, kita akan membahas tentang link dan navigasi antar halaman dalam HTML, agar website Anda bisa saling terhubung dengan baik.