Heading Pada HTML

Heading dalam HTML digunakan untuk memberikan struktur dan hierarki pada teks di halaman web. Artikel ini membahas cara menggunakan tag heading (h1 hingga h6), pentingnya penggunaan heading untuk SEO, dan bagaimana heading dapat meningkatkan keterbacaan dan navigasi pada halaman web. Pelajari cara efektif menggunakan heading dalam HTML untuk pengembangan situs yang lebih terorganisir.

HTML & CSS Dasar Febuari 19, 2025 0 84 Tambahkan ke Daftar Bacaan

Heading Pada HTML

Heading (judul) pada HTML digunakan untuk memberikan struktur dan hierarki pada konten halaman web. Dalam HTML, terdapat enam tingkat heading yang dapat digunakan untuk menandai judul atau heading dari konten yang berbeda-beda, yaitu dari <h1> hingga <h6>. Makin kecil angka di belakang tag, makin kecil ukuran teks yang ditampilkan.

1. Tag Heading HTML

<h1>: Digunakan untuk membuat heading utama atau judul terpenting pada halaman.
<h2>: Digunakan untuk subjudul di bawah <h1>, memberikan hirarki kedua.
<h3>: Subjudul di bawah <h2>, memberi hirarki ketiga.
<h4>: Subjudul di bawah <h3>, memberi hirarki keempat.
<h5>: Subjudul di bawah <h4>, memberi hirarki kelima.
<h6>: Subjudul di bawah <h5>, memberi hirarki keenam, yang paling kecil ukurannya.

2. Penggunaan Heading HTML

Berikut adalah contoh penggunaan tag heading pada HTML:

<h1>Ini adalah Heading 1 (Judul Utama)</h1>
<p>Ini adalah paragraf yang menjelaskan tentang heading.</p>

<h2>Ini adalah Heading 2 (Subjudul)</h2>
<p>Ini adalah paragraf yang menjelaskan subjudul.</p>

<h3>Ini adalah Heading 3 (Sub-subjudul)</h3>
<p>Ini adalah paragraf yang menjelaskan sub-subjudul.</p>

<h4>Ini adalah Heading 4</h4>
<h5>Ini adalah Heading 5</h5>
<h6>Ini adalah Heading 6</h6>

hasil:

3. Tips Menggunakan Heading di HTML

Gunakan <h1> untuk judul utama: Gunakan tag <h1> hanya sekali pada setiap halaman untuk menandai judul utama dari halaman tersebut, yang biasanya berisi topik atau tema utama halaman.
Gunakan hirarki yang tepat: Gunakan heading dengan urutan yang benar, mulai dari <h1> hingga <h6>. Jangan lompat dari <h1> langsung ke <h3>, karena ini akan membingungkan struktur konten bagi pembaca dan mesin pencari.
SEO (Search Engine Optimization): Heading juga sangat penting untuk SEO. Mesin pencari menggunakan heading untuk memahami struktur konten halaman dan relevansinya terhadap pencarian. Pastikan untuk menggunakan kata kunci yang relevan di dalam heading untuk membantu peringkat pencarian halaman.

4. Contoh Struktur Halaman dengan Heading

Berikut adalah contoh struktur halaman dengan heading yang benar:

<!DOCTYPE html>
<html>
<head>
    <title>Contoh Heading HTML</title>
</head>
<body>
    <h1>Selamat datang di Website Kami</h1>
    <p>Website ini menyediakan berbagai informasi dan artikel yang berguna.</p>

    <h2>Artikel Terbaru</h2>
    <p>Artikel pertama mengenai teknologi terkini.</p>
    <h3>Teknologi AI</h3>
    <p>Artikel ini membahas perkembangan terbaru dalam teknologi AI.</p>

    <h2>Tentang Kami</h2>
    <p>Informasi lebih lanjut tentang perusahaan kami.</p>

    <h3>Visi dan Misi</h3>
    <p>Visi kami adalah untuk memajukan industri teknologi di Indonesia.</p>
</body>
</html>

hasil:

Heading pada HTML tidak hanya berfungsi untuk memberikan struktur yang jelas pada halaman web, tetapi juga membantu mesin pencari dalam memahami konten halaman. Penggunaan heading yang tepat akan memperbaiki keterbacaan dan SEO halaman Anda. Gunakan <h1> hingga <h6> sesuai dengan hirarki dan struktur konten halaman Anda.