Lompat ke konten Lompat ke sidebar Lompat ke footer
Beranda / HTML / Programming / WEB

Tutorial HTML #3 Heading di HTML

By : Fikri Ramdani Posting Komentar
Tutorial HTML Heading h1 h2 h3 h4 h5 h6

Assalamualaikum sobat blogger semua. Pada tutorial sebelumnya, kita sudah belajar membuat halaman HTML sederhana dan menampilkan tulisan Hello, World! di browser.

Sekarang kita akan melanjutkan ke salah satu elemen HTML yang sangat penting ketika membuat struktur halaman, yaitu Heading. Heading digunakan untuk menandai judul dan subjudul sehingga isi halaman memiliki hierarki yang jelas dan lebih mudah dibaca.

Kalau kalian pernah membuat dokumen di Microsoft Word atau Google Docs, konsepnya sebenarnya mirip. Ada judul utama, kemudian subjudul, lalu subjudul yang lebih spesifik di bawahnya. Bedanya, di HTML struktur tersebut ditulis menggunakan elemen <h1> sampai <h6>.

Apa Itu Heading di HTML?

Heading adalah elemen HTML yang digunakan untuk memberikan struktur hierarki pada judul dan subjudul sebuah halaman. HTML menyediakan enam tingkat heading, yaitu:

  • <h1> — heading tingkat 1 atau judul utama.
  • <h2> — subjudul utama.
  • <h3> — subjudul di dalam bagian <h2>.
  • <h4> — subjudul yang lebih spesifik di dalam <h3>.
  • <h5> — tingkat heading berikutnya.
  • <h6> — tingkat heading paling rendah.

Perlu diperhatikan bahwa heading bukan sekadar cara untuk membuat tulisan menjadi besar atau tebal. Heading mempunyai fungsi semantik, yaitu memberikan informasi mengenai struktur dan tingkat kepentingan suatu bagian konten.

Kalau tujuan kalian hanya ingin mengubah ukuran, warna, atau ketebalan teks, gunakan CSS. Sedangkan heading digunakan ketika teks tersebut memang berfungsi sebagai judul atau subjudul.

Perbedaan h1, h2, h3, h4, h5, dan h6

Secara default, browser biasanya menampilkan heading dengan ukuran yang berbeda. Semakin tinggi tingkat heading, biasanya ukurannya semakin besar.

Heading H1

Heading H2

Heading H3

Heading H4

Heading H5
Heading H6

Ukuran tersebut adalah tampilan default browser. Dalam website sebenarnya, ukuran heading dapat diubah menggunakan CSS tanpa mengubah tingkat atau makna semantiknya.

Jadi, jangan memilih <h2> hanya karena ingin tulisan terlihat lebih kecil daripada <h1>. Pilih tingkat heading berdasarkan struktur kontennya.

Mulai Praktik Membuat Heading

Sekarang kita akan membuat halaman HTML sederhana yang berisi beberapa tingkatan heading.

  1. Buka Visual Studio Code atau code editor lain yang kalian gunakan.
  2. Buat file baru dengan nama latihan-heading.html.
  3. Ketikkan kode HTML berikut:

Contoh Kode HTML:

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>Belajar Heading HTML</title>
</head>
<body>

    <h1>Belajar HTML Dasar</h1>

    <h2>Mengenal Heading</h2>
    <p>Heading digunakan untuk membuat judul dan subjudul.</p>

    <h3>Jenis-Jenis Heading</h3>
    <p>HTML menyediakan heading dari h1 sampai h6.</p>

    <h2>Belajar Paragraf</h2>
    <p>Paragraf digunakan untuk menampilkan kumpulan teks.</p>

</body>
</html>

Simpan file tersebut, kemudian buka file latihan-heading.html menggunakan browser. Kalian akan melihat struktur judul dan subjudul yang memiliki ukuran berbeda.

Memahami Struktur Heading dengan Contoh Nyata

Agar lebih mudah memahami hierarki heading, anggap kita sedang membuat artikel berjudul "Panduan Belajar HTML untuk Pemula".

Strukturnya bisa dibuat seperti berikut:

<h1>Panduan Belajar HTML untuk Pemula</h1>

<h2>Apa Itu HTML?</h2>

<h2>Persiapan Belajar HTML</h2>
<h3>Code Editor</h3>
<h3>Web Browser</h3>

<h2>Dasar-Dasar HTML</h2>
<h3>Heading</h3>
<h3>Paragraf</h3>
<h3>Link</h3>
<h3>Gambar</h3>

Perhatikan hubungan antara heading tersebut. <h1> menjadi judul utama halaman, kemudian beberapa bagian utama menggunakan <h2>. Jika sebuah bagian <h2> memiliki pembahasan yang lebih kecil, kita dapat menggunakan <h3>.

Dengan struktur seperti ini, pembaca dapat memahami susunan artikel bahkan sebelum membaca seluruh isinya.

Apakah Harus Hanya Ada Satu H1?

Kalian mungkin sering mendengar aturan bahwa sebuah halaman HTML wajib memiliki tepat satu tag H1. Dalam praktik modern, persoalannya tidak sesederhana itu.

HTML memungkinkan sebuah dokumen memiliki lebih dari satu elemen <h1>. Namun, untuk artikel blog biasa, menggunakan satu H1 yang mewakili judul utama halaman adalah pendekatan yang sederhana, konsisten, dan mudah dipahami.

Yang jauh lebih penting adalah jangan menggunakan heading hanya untuk mengejar ukuran tulisan. Gunakan heading sesuai dengan struktur informasi yang sedang kalian buat.

Contoh struktur artikel yang sederhana:

<h1>Cara Belajar HTML untuk Pemula</h1>

<h2>Apa Itu HTML?</h2>
<p>Penjelasan mengenai HTML...</p>

<h2>Cara Membuat File HTML</h2>
<p>Langkah-langkah membuat file HTML...</p>

<h3>Menggunakan Visual Studio Code</h3>
<p>Cara membuat file menggunakan VS Code...</p>

<h2>Kesimpulan</h2>
<p>Ringkasan pembahasan...</p>

Bagaimana Heading Berhubungan dengan SEO?

Heading dapat membantu mesin pencari memahami struktur dan konteks sebuah halaman. Struktur heading yang jelas juga membantu pembaca menemukan bagian artikel yang mereka cari.

Namun, jangan menganggap bahwa memasukkan banyak keyword ke dalam <h1>, <h2>, atau <h3> otomatis membuat artikel mendapatkan peringkat tinggi di Google.

SEO bukan hanya tentang heading. Kualitas dan kelengkapan informasi, relevansi dengan kebutuhan pembaca, pengalaman pengguna, struktur halaman, internal linking, serta berbagai faktor lainnya juga berperan.

Jadi, gunakan heading terutama untuk membuat struktur konten yang jelas dan mudah dipahami. Jika struktur tersebut juga membantu mesin pencari memahami isi halaman, itu merupakan manfaat tambahan.

Kesalahan Heading yang Sering Dilakukan Pemula

Ada beberapa kesalahan yang cukup sering terjadi ketika seseorang baru belajar HTML.

1. Menggunakan Heading Hanya untuk Membesarkan Teks

Misalnya kalian ingin membuat tulisan lebih besar lalu menggunakan <h2>, padahal tulisan tersebut bukan judul atau subjudul.

Solusinya adalah menggunakan CSS untuk mengatur ukuran teks.

2. Melompati Struktur Tanpa Alasan

Contohnya menggunakan <h2> kemudian langsung menggunakan <h5> hanya karena ingin mendapatkan ukuran tulisan tertentu.

Lebih baik gunakan tingkat heading berdasarkan hubungan antarbagian konten, bukan berdasarkan ukuran tampilannya.

3. Memasukkan Terlalu Banyak Keyword

Heading seharusnya tetap ditulis secara natural dan menjelaskan isi bagian tersebut. Jangan membuat heading yang terasa dipaksakan hanya karena ingin memasukkan kata kunci sebanyak mungkin.

4. Mengabaikan Struktur Konten

Artikel yang panjang tanpa heading akan lebih sulit dipindai oleh pembaca. Heading dapat digunakan untuk memecah pembahasan menjadi beberapa bagian yang lebih mudah dipahami.

Tips Membuat Struktur Heading yang Baik

  • Gunakan <h1> sebagai judul utama halaman atau artikel.
  • Gunakan <h2> untuk bagian utama pembahasan.
  • Gunakan <h3> untuk subbagian di dalam <h2>.
  • Gunakan <h4> sampai <h6> jika struktur konten memang membutuhkannya.
  • Jangan memilih heading hanya berdasarkan ukuran teks.
  • Gunakan CSS jika tujuan kalian hanya ingin mengubah tampilan teks.
  • Buat judul yang jelas dan menggambarkan isi bagian yang dibahas.
  • Jangan memasukkan keyword secara berlebihan.

Kesimpulan

Heading adalah bagian penting dari struktur dokumen HTML. HTML menyediakan enam tingkat heading, mulai dari <h1> hingga <h6>, yang dapat digunakan untuk menyusun judul dan subjudul berdasarkan hierarki informasi.

Hal terpenting yang perlu kalian ingat adalah heading bukan sekadar alat untuk memperbesar teks. Heading memiliki fungsi semantik untuk membantu menyusun struktur halaman agar lebih mudah dipahami oleh manusia maupun teknologi yang membaca dokumen tersebut.

Untuk artikel blog, kalian bisa menggunakan satu <h1> sebagai judul utama, kemudian menyusun pembahasan menggunakan <h2>, <h3>, dan seterusnya sesuai kebutuhan.

Kalau konsep ini sudah dipahami, berarti kalian sudah memiliki salah satu dasar penting dalam membuat struktur halaman HTML yang rapi.

Di tutorial berikutnya, kita akan membahas elemen paragraf HTML, yaitu bagaimana cara menampilkan dan mengatur teks dalam bentuk paragraf menggunakan tag <p>.

🚀 Heading Sudah Dipahami, Saatnya Belajar Paragraf!

Setelah mengetahui cara membuat judul dan subjudul, sekarang saatnya belajar bagaimana menampilkan teks dalam bentuk paragraf agar halaman HTML kalian menjadi lebih informatif dan terstruktur.

Lanjut ke Tutorial #4: Membuat Paragraf HTML →

Posting Komentar untuk "Tutorial HTML #3 Heading di HTML"