Assalamualaikum sobat blogger semua dimanapun dan kapanpun kalian berada. Pada postingan kali ini, kita akan melanjutkan seri panduan HTML Dasar kita. Seperti yang kita ketahui, HTML adalah fondasi paling awal dan mutlak jika kalian ingin terjun ke dunia Web Programming, baik itu sebagai Frontend maupun Backend Developer.

Pada tutorial kali ini, gua akan mengupas tuntas tentang bagaimana cara menggunakan Heading pada dokumen HTML. Yuk, langsung kita bahas konsep dan cara prakteknya!

Apa itu Heading di HTML?

Gampangnya, Heading adalah tag khusus yang digunakan untuk membuat judul, sub-judul, nama, atau label penting di dalam sebuah halaman web atau artikel. Sama seperti saat lu menulis dokumen di Microsoft Word atau membaca koran, ada judul besar utama, lalu di bawahnya ada sub-judul yang ukurannya lebih kecil.

Di dalam HTML, Heading ini dibagi menjadi 6 tingkatan, mulai dari tag <h1> sampai dengan tag <h6>.

<h1>: Digunakan untuk judul utama (ukurannya paling besar dan tebal).
<h2> sampai <h6>: Digunakan untuk sub-judul atau anak bab berikutnya (ukurannya akan semakin mengecil).

👨‍💻 Mulai Praktek Membuat Heading

Biar langsung kelihatan bedanya, yuk kita buat file latihan baru. Silakan ikuti panduan berikut:

Buka code editor andalan kalian (VS Code).
Buat sebuah file dokumen HTML baru bernama latihan-heading.html.
Ketikkan atau salin struktur kode lengkap di bawah ini:

Contoh Kodingan:

<!DOCTYPE html>
<html lang="id">

    <title>Belajar Heading di HTML</title>



    <h1>Ini Heading Tingkat 1 (Judul Utama)</h1>
    <h2>Ini Heading Tingkat 2 (Sub Judul)</h2>
    <h3>Ini Heading Tingkat 3</h3>
    <h4>Ini Heading Tingkat 4</h4>
    <h5>Ini Heading Tingkat 5</h5>
    <h6>Ini Heading Tingkat 6 (Paling Kecil)</h6>


</html>

4. Simpan file tersebut, lalu buka di browser kalian untuk melihat hasilnya.

Hasil Output Perbandingan Ukuran di Browser:

Ini Heading Tingkat 1 (Judul Utama)

Ini Heading Tingkat 2 (Sub Judul)

Ini Heading Tingkat 3

Ini Heading Tingkat 4

Ini Heading Tingkat 5

Ini Heading Tingkat 6 (Paling Kecil)

Untuk mengganti isi tulisannya, lu tinggal ubah saja teks yang berada di antara tag pembuka dan tag penutupnya. Contohnya: <h1>Isi Judul Lu di Sini</h1>.

💡 Aturan Penting: Kenapa Heading Berpengaruh ke SEO Google?

Banyak pemula mengira tag Heading dipakai cuma buat "membesarkan ukuran huruf". Itu salah besar, bro! Kalau cuma mau membesarkan huruf, kita bisa pakai CSS. Fungsi utama Heading adalah menentukan struktur hierarki konten.

Mesin pencari seperti Google menggunakan tag Heading ini untuk memahami topik apa yang sedang dibahas di web lu. Aturan mainnya:

Hanya boleh ada SATU tag <h1> di dalam sebuah halaman web (biasanya otomatis dipakai untuk judul artikel blog).
Gunakan <h2> untuk poin-poin bahasan utama di dalam artikel.
Gunakan <h3> jika di dalam poin <h2> tersebut masih ada sub-pembahasan yang lebih kecil lagi (anak bab). Jangan menulis melompat dari <h2> langsung ke <h4> ya!

Kesimpulan

Heading di HTML (h1 sampai h6) bukan sekadar alat pembesar teks, melainkan penentu struktur utama halaman web lu agar rapi di mata pembaca dan disukai oleh SEO Google. Selamat mencoba kodenya di laptop masing-masing!

Sampai di sini dulu tutorial kali ini. Kalau ada langkah yang bingung atau tampilannya ngga sesuai, langsung aja tanyain di Kolom Komentar bawah ya. Kita diskusikan bareng!

Wassalam.

🚀 Mantap, Judul Sudah Aman! Lalu Bagaimana Isi Kontennya?

Setelah berhasil menguasai pembuatan Judul dan Sub-judul dengan Heading, langkah wajib selanjutnya adalah belajar membungkus teks artikel utama agar rapi menggunakan elemen Paragraf.

Lanjut ke Tutorial #4: Membuat Paragraf HTML →

Ramdanifikri.id

Tutorial HTML #3 Heading di HTML