Setelah memahami struktur dasar HTML (doctype, html, head, body), sekarang saatnya kita belajar membuat tulisan di halaman web. Dua tag yang paling sering kamu gunakan adalah heading dan paragraf.
Apa Itu Tag Heading?
Tag heading adalah judul atau subjudul dalam halaman web. Heading sangat penting karena:
- Memberi struktur hierarki pada konten (seperti bab dan subbab di buku)
- Membantu mesin pencari (SEO) memahami topik utama halaman
- Memudahkan pembaca memindai (scan) isi halaman
HTML menyediakan 6 level heading, dari <h1> hingga <h6>:
| Tag | Tingkat | Tampilan Default |
|---|---|---|
<h1> |
Paling penting (hanya 1 per halaman) | Paling besar dan tebal |
<h2> |
Subjudul utama | Agak besar |
<h3> |
Sub-subjudul | Sedang |
<h4> |
Level 4 | Lebih kecil |
<h5> |
Level 5 | Kecil |
<h6> |
Paling rendah | Paling kecil |
Contoh Visual Perbandingan Heading
Ini adalah H1
Ini adalah H2
Ini adalah H3
Ini adalah H4
Ini adalah H5
Ini adalah H6
- Setiap halaman sebaiknya hanya memiliki SATU <h1> (sebagai judul utama)
- Urutan heading harus berjenjang: jangan langsung lompat dari <h1> ke <h4>
- Heading bukan untuk membuat teks besar/bold — gunakan CSS untuk itu
Tag Paragraf (<p>)
Tag <p> digunakan untuk membuat paragraf teks. Browser akan otomatis menambahkan jarak (margin) di atas dan bawah setiap paragraf.
Contoh sederhana:
<p>Ini adalah paragraf pertama. Isinya bisa panjang dan browser akan membungkusnya secara otomatis.</p> <p>Ini adalah paragraf kedua. Otomatis ada jarak antara paragraf pertama dan kedua.</p>
Hasilnya:
Ini adalah paragraf pertama. Isinya bisa panjang dan browser akan membungkusnya secara otomatis.
Ini adalah paragraf kedua. Otomatis ada jarak antara paragraf pertama dan kedua.
Studi Kasus: Membuat Artikel Sederhana
Sekarang kita praktikkan langsung. Buat file artikel-pertamaku.html dengan struktur lengkap:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Artikel Pertamaku - Belajar HTML</title>
</head>
<body>
<h1>Tips Belajar HTML untuk Pemula</h1>
<p>HTML adalah fondasi dari setiap website. Tanpa HTML, tidak akan ada halaman web yang bisa kita lihat. Artikel ini akan membahas beberapa tips agar kamu cepat menguasai HTML.</p>
<h2>1. Mulai dari Dasar</h2>
<p>Jangan langsung loncat ke hal yang rumit. Pahami dulu struktur dasar seperti doctype, html, head, dan body. Latihan membuat halaman sederhana setiap hari.</p>
<h2>2. Praktik Langsung</h2>
<p>Teori tanpa praktik akan cepat lupa. Buatlah file .html dan coba-coba sendiri. Kesalahan adalah bagian dari proses belajar.</p>
<h3>2.1 Gunakan Tools yang Tepat</h3>
<p>Pilih text editor yang nyaman seperti VS Code, Sublime Text, atau Notepad++. Jangan lupa menggunakan browser untuk melihat hasilnya.</p>
<h2>3. Jangan Takut Salah</h2>
<p>Setiap developer pasti pernah salah. Yang penting adalah belajar dari kesalahan dan terus mencoba. Selamat belajar HTML!</p>
</body>
</html>
Coba buka file tersebut di browser. Perhatikan struktur hierarki heading:
<h1>adalah judul utama artikel<h2>digunakan untuk subbab (1, 2, 3)<h3>digunakan untuk sub-subbab (2.1)
Sedikit CSS untuk Mempercantik (Bonus)
Kamu bisa menambahkan CSS sederhana di dalam <head> agar heading dan paragraf terlihat lebih rapi:
<style>
body {
font-family: Arial, sans-serif;
max-width: 800px;
margin: 0 auto;
padding: 20px;
line-height: 1.6;
}
h1 {
color: #3b82f6;
border-bottom: 3px solid #3b82f6;
padding-bottom: 10px;
}
h2 {
color: #2563eb;
margin-top: 30px;
}
p {
color: #333;
}
</style>
Kesalahan Umum Pemula
- Menggunakan <h1> berkali-kali → SEO jadi kacau, pakai <h1> hanya sekali
- Melompat level heading → dari <h1> langsung ke <h4> (sebaiknya urut)
- Menggunakan heading hanya untuk memperbesar teks → gunakan CSS dengan
font-size - Lupa menutup tag →
<p>teks(harusnya</p>) - Menggunakan banyak enter atau spasi → browser mengabaikan spasi/enter berlebih, gunakan CSS untuk jarak
Perbedaan Spasi di HTML vs Browser
Penting untuk diketahui: HTML mengabaikan spasi berlebih dan enter. Contoh:
<p>Ini
banyak
enter dan spasi
tapi tetap jadi satu baris</p>
Hasilnya akan tetap: "Ini banyak enter dan spasi tapi tetap jadi satu baris"
Untuk membuat baris baru, gunakan <br> (break line) yang akan kita pelajari nanti.
Latihan Singkat
- Buat file HTML baru dengan judul "Profil Diriku"
- Gunakan
<h1>untuk nama lengkapmu - Gunakan
<h2>untuk kategori (misal: Tentang Saya, Hobi, Cita-cita) - Setiap kategori diisi dengan
<p>minimal 2 kalimat - Simpan dan buka di browser, lihat hasilnya
Intisari Hari Ini
<h1>sampai<h6>untuk judul dan subjudul (berjenjang)- Setiap halaman cukup satu <h1> untuk judul utama
<p>untuk paragraf teks (otomatis ada jarak antar paragraf)- Heading penting untuk SEO dan kemudahan baca
- Jangan pakai heading hanya untuk memperbesar teks
Artikel Sebelumnya: HTML Dasar #2 - Struktur Dasar HTML: Doctype, html, head, body
Artikel Selanjutnya: HTML Dasar #4 - Memformat Teks: Bold, Italic, Underline (b, strong, i, em, u)