Belajar Nesting dan Indentasi di HTML (Membuat List Bertingkat dengan Rapi)

Halo teman-teman!

Di pelajaran sebelumnya, kita sudah belajar membuat ordered list dan unordered list. Nah, kali ini kita akan memperdalamnya dengan nested list dan memahami pentingnya indentasi. Ini langkah penting agar kode kita rapi dan mudah dibaca, terutama saat membuat struktur list yang lebih kompleks.

Apa Itu Nested List?

Nested list adalah list yang berada di dalam list lain. Dengan kata lain, kalian bisa membuat list di dalam sebuah item list. Contohnya seperti ini:

Contoh Nested List:

Item A
Item B
- Subitem B1
- Subitem B2
Item C

Dengan nested list, kalian bisa membuat hierarki dalam daftar, seperti daftar bahan atau langkah-langkah yang saling berkaitan.

Cara Membuat Nested List

1. Struktur Dasar

Untuk membuat nested list, gunakan <ul> (unordered list) atau <ol> (ordered list) di dalam sebuah <li> (list item). Contohnya:

<ul>
    <li>Item A</li>
    <li>Item B
        <ul>
            <li>Subitem B1</li>
            <li>Subitem B2</li>
        </ul>
    </li>
    <li>Item C</li>
</ul>

Hasil di browser:

Item A
Item B
- Subitem B1
- Subitem B2
Item C

2. Menggabungkan Ordered dan Unordered List

Kalian juga bisa menggabungkan <ol> dan <ul> untuk membuat struktur yang lebih kompleks:

<ol>
    <li>Langkah 1</li>
    <li>Langkah 2
        <ul>
            <li>Detail A</li>
            <li>Detail B</li>
        </ul>
    </li>
    <li>Langkah 3</li>
</ol>

Hasil di browser:

Langkah 1
Langkah 2
- Detail A
- Detail B
Langkah 3

Pentingnya Indentasi

Indentasi membuat kode lebih rapi dan mudah dibaca. Contoh tanpa indentasi:

<ul><li>Item A</li><li>Item B<ul><li>Subitem B1</li><li>Subitem B2</li></ul></li><li>Item C</li></ul>

Dibandingkan dengan indentasi yang benar:

<ul>
    <li>Item A</li>
    <li>Item B
        <ul>
            <li>Subitem B1</li>
            <li>Subitem B2</li>
        </ul>
    </li>
    <li>Item C</li>
</ul>

Kenapa penting?

Kode lebih mudah dibaca dan dipahami, terutama untuk nested list.
Membantu menemukan kesalahan (debugging) saat ada masalah di kode.

Contoh Proyek: Nested List untuk Daftar Belanja

Kita akan membuat nested list untuk daftar belanja:

<!DOCTYPE html>
<html>
<head>
    <title>Daftar Belanja</title>
</head>
<body>
    <h1>Daftar Belanja</h1>
    <ul>
        <li>Bahan Makanan
            <ul>
                <li>Beras</li>
                <li>Sayuran</li>
                <li>Buah-buahan</li>
            </ul>
        </li>
        <li>Kebutuhan Rumah Tangga
            <ul>
                <li>Sabun</li>
                <li>Sampo</li>
            </ul>
        </li>
        <li>Minuman
            <ul>
                <li>Teh</li>
                <li>Kopi</li>
                <li>Air Mineral</li>
            </ul>
        </li>
    </ul>
</body>
</html>

Hasil di browser:

Bahan Makanan
- Beras
- Sayuran
- Buah-buahan
Kebutuhan Rumah Tangga
- Sabun
- Sampo
Minuman
- Teh
- Kopi
- Air Mineral

Tips untuk Nested List

Perhatikan penutup tag: Setiap tag pembuka harus memiliki tag penutup yang tepat.
Indentasi otomatis: Gunakan fitur di teks editor seperti Visual Studio Code untuk otomatis merapikan indentasi (Ctrl+S atau Cmd+S).
Periksa hasil secara berkala: Gunakan fitur preview untuk melihat hasil kode di browser.

Kesimpulan
Nested list membantu kita membuat daftar yang lebih terstruktur dan kompleks. Dengan indentasi yang benar, kode kalian akan lebih rapi dan mudah dipahami. Selanjutnya, kita akan belajar tentang Anchor Element untuk membuat hyperlink di website. Sampai jumpa di pelajaran berikutnya! 😊