Heading HTML (h1 - h6)

Heading digunakan untuk membuat judul atau subjudul pada halaman web. HTML menyediakan 6 level heading dari <h1> (terpenting) sampai <h6> (paling kecil).

🎯 Contoh Semua Level Heading

<h1>Heading Level 1 - Judul Utama</h1>
<h2>Heading Level 2 - Subjudul</h2>
<h3>Heading Level 3 - Bagian</h3>
<h4>Heading Level 4 - Sub-bagian</h4>
<h5>Heading Level 5 - Minor Heading</h5>
<h6>Heading Level 6 - Paling Kecil</h6>

                                                
heading-example.html

                                            Heading Level 1 - Judul Utama
                                            Heading Level 2 - Subjudul
                                            Heading Level 3 - Bagian
                                            Heading Level 4 - Sub-bagian
                                            Heading Level 5 - Minor Heading
                                            Heading Level 6 - Paling Kecil

📝 Best Practice Penggunaan Heading

Gunakan H1 Sekali Saja

Setiap halaman sebaiknya memiliki satu <h1> sebagai judul utama.

Urutan yang Logis

Ikuti hierarki: h1 → h2 → h3, jangan melompat level.

Bukan untuk Styling

Jangan gunakan heading hanya untuk ukuran teks, gunakan CSS.

Optimasi SEO

Heading yang baik meningkatkan peringkat di mesin pencari.

Deskriptif dan Relevan

Buat heading yang jelas mencerminkan konten di bawahnya.

Aksesibilitas

Membantu screen reader memahami struktur halaman.

Struktur Heading yang Ideal:

h1: Judul Utama Halaman

h2: Bagian Utama

h3: Sub-bagian

h3: Sub-bagian Lain

h2: Bagian Utama Lain

h3: Sub-bagian

h4: Detail

Paragraf HTML (<p>)

Elemen <p> digunakan untuk membuat paragraf teks. Browser secara otomatis menambahkan margin sebelum dan sesudah paragraf untuk memisahkan konten.

📖 Contoh Penggunaan Paragraf

<p>Ini adalah paragraf pertama. HTML adalah bahasa markup standar untuk membuat halaman web. HTML mendeskripsikan struktur halaman web menggunakan elemen-elemen.</p>

<p>Ini adalah paragraf kedua. Setiap paragraf secara otomatis memiliki margin yang memisahkannya dari elemen lain. Ini membuat teks lebih mudah dibaca dan terorganisir.</p>

<p>
    Paragraf juga bisa berisi baris panjang yang akan secara otomatis 
    dipotong oleh browser sesuai dengan lebar containernya. Tidak 
    perlu menggunakan <br> kecuali untuk pemisahan yang spesifik.
</p>

paragraph-example.html

Ini adalah paragraf pertama. HTML adalah bahasa markup standar untuk membuat halaman web. HTML mendeskripsikan struktur halaman web menggunakan elemen-elemen.

Ini adalah paragraf kedua. Setiap paragraf secara otomatis memiliki margin yang memisahkannya dari elemen lain. Ini membuat teks lebih mudah dibaca dan terorganisir.

Paragraf juga bisa berisi baris panjang yang akan secara otomatis dipotong oleh browser sesuai dengan lebar containernya. Tidak perlu menggunakan <br> kecuali untuk pemisahan yang spesifik.

Formatting Teks dalam Paragraf

HTML menyediakan berbagai elemen untuk memformat teks dalam paragraf sesuai dengan makna semantiknya.

<strong> Semantik

Teks dengan penting tinggi secara semantik.

Penggunaan: <strong>penting</strong>

<em> Semantik

Teks dengan penekanan khusus.

Penggunaan: <em>penekanan</em>

<mark> Semantik

Teks yang ditandai atau disorot.

Penggunaan: <mark>highlight</mark>

<small> Semantik

Teks dengan ukuran lebih kecil untuk informasi sampingan.

Penggunaan: <small>kecil</small>

<br> Struktural

Baris pertama
Baris kedua (line break)

Penggunaan: Baris1<br>Baris2

<hr> Struktural

Garis pemisah tematik antara bagian

Penggunaan: <hr>

Contoh Lengkap

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contoh Heading dan Paragraf</title>
</head>
<body>
    <h1>Belajar HTML Dasar</h1>
    
    <p>HTML adalah <strong>bahasa markup standar</strong> untuk membuat halaman web. 
    Dengan HTML, kita dapat membuat struktur konten yang terorganisir dan mudah dibaca.</p>
    
    <h2>Penggunaan Heading</h2>
    <p>Heading membantu mengorganisir konten menjadi bagian-bagian yang logis. 
    <em>Setiap halaman sebaiknya memiliki satu H1</em> sebagai judul utama.</p>
    
    <h3>Hierarchy yang Tepat</h3>
    <p>Gunakan heading secara berurutan dari H1 ke H6. <mark>Jangan melompat level</mark> 
    karena ini penting untuk aksesibilitas dan SEO.</p>
    
    <h2>Formatting Teks</h2>
    <p>HTML menyediakan berbagai elemen untuk memformat teks:<br>
    - <strong>Strong untuk penting</strong><br>
    - <em>Em untuk penekanan</em><br>
    - <mark>Mark untuk highlight</mark></p>
    
    <hr>
    
    <p><small>Artikel ini merupakan bagian dari tutorial belajar HTML dasar.</small></p>
</body>
</html>

contoh-lengkap.html

Belajar HTML Dasar

HTML adalah bahasa markup standar untuk membuat halaman web. Dengan HTML, kita dapat membuat struktur konten yang terorganisir dan mudah dibaca.

Penggunaan Heading

Heading membantu mengorganisir konten menjadi bagian-bagian yang logis. Setiap halaman sebaiknya memiliki satu H1 sebagai judul utama.

Hierarchy yang Tepat

Gunakan heading secara berurutan dari H1 ke H6. Jangan melompat level karena ini penting untuk aksesibilitas dan SEO.

Formatting Teks

HTML menyediakan berbagai elemen untuk memformat teks:
- Strong untuk penting
- Em untuk penekanan
- Mark untuk highlight

Artikel ini merupakan bagian dari tutorial belajar HTML dasar.

Latihan Praktik

Buat Artikel HTML Pertamamu

Pemula

🎯 Tujuan Latihan:

Buat sebuah halaman HTML yang menunjukkan pemahaman tentang heading, paragraf, dan formatting teks.

📋 Requirements:

Satu judul utama dengan <h1>
Minimal 2 subjudul dengan <h2>
Minimal 1 sub-subjudul dengan <h3>
3-4 paragraf yang relevan dengan judul
Gunakan <strong>, <em>, dan <mark>
Tambahkan <hr> sebagai pemisah
Gunakan <small> untuk informasi footer

Tip: Buat tentang topik yang kamu sukai (hobi, makanan favorit, atau tempat wisata) agar latihan lebih menyenangkan!

Heading & Paragraf