Belajar Heading dalam HTML: Membuat Struktur Website dengan Mudah

Home » Tutorials

Halo teman-teman!

Kita sudah membahas apa itu HTML di postingan sebelumnya. Kali ini, kita lanjut belajar dengan mempraktikkan salah satu elemen HTML paling penting, yaitu heading. Yuk, kita mulai!

Apa Itu Heading?

Dalam HTML, heading digunakan untuk memberi judul atau hierarki pada bagian-bagian website. Contohnya seperti di buku, heading itu seperti judul utama, subjudul, hingga bagian-bagian kecil dalam bab.

Heading dalam HTML dibuat menggunakan tag seperti <h1> hingga <h6>.

<h1>: Heading paling besar dan penting, biasanya digunakan untuk judul utama.
<h6>: Heading paling kecil, untuk detail atau subbagian.

Membuat Heading dalam HTML

Begini contoh penggunaan tag heading:

<h1>Hello World</h1>

Tag pembuka: <h1>
Tag penutup: </h1> (ingat, ada tanda garis miring / untuk menutup tag).
Konten: Teks yang diapit oleh tag, seperti "Hello World" di atas.

Perbedaan Tag dan Elemen

Tag: Bagian yang ada di dalam tanda < >. Contoh: <h1> atau </h1>.
Elemen: Gabungan tag pembuka, konten, dan tag penutup.

Contohnya:

<h1>Hello World</h1>

Seluruh bagian itu disebut elemen HTML.

Hierarki Heading

Heading dalam HTML mengikuti hierarki, seperti struktur tabel isi di buku:

<h1> untuk judul utama
<h2> untuk subjudul
<h3> hingga <h6> untuk bagian yang lebih detail

Contohnya:

<h1>Buku</h1>  
<h2>Bab 1</h2>  
<h3>Bagian 1.1</h3>  
<h4>Diagram</h4>

Hasilnya di browser, heading dengan tag <h1> akan terlihat paling besar, sedangkan <h4> lebih kecil.

Tips Penting dalam Membuat Heading

Gunakan Satu <h1> Saja
Heading <h1> adalah judul utama. Tidak disarankan menggunakan lebih dari satu <h1> di halaman yang sama.
Ikuti Urutan
Pastikan urutan heading teratur. Jangan lompat-lompat, misalnya langsung dari <h1> ke <h3> tanpa <h2>.
Pahami Tujuan Heading
Heading tidak hanya untuk ukuran teks, tapi juga untuk memberi struktur yang jelas pada website.

Tantangan: Buat Heading Sendiri

Coba buat file HTML seperti ini:

<!DOCTYPE html>
<html>
<head>
    <title>Latihan Heading</title>
</head>
<body>
    <h1>Judul Utama</h1>
    <h2>Subjudul 1</h2>
    <h3>Bagian 1.1</h3>
    <h2>Subjudul 2</h2>
    <h3>Bagian 2.1</h3>
    <h4>Detail Tambahan</h4>
</body>
</html>

Simpan file dengan nama index.html, lalu buka di browser. Perhatikan hierarki dan ukuran teks.

Kesimpulan
Heading adalah elemen penting dalam HTML untuk membuat struktur website. Dengan memahami cara kerjanya, kita bisa membuat website yang rapi dan terstruktur.

Di pelajaran berikutnya, kita akan mempelajari elemen penting lainnya, yaitu paragraf. Sampai jumpa!