Menu
CoddyTech

list Bersarang

Termasuk bagian Dasar-Dasar dalam perjalanan HTML di Coddy. Pelajaran 14 dari 60.

Kamu dapat menempatkan satu list di dalam list lain. Ini disebut list bersarang. Ini berguna untuk membuat struktur hierarkis, seperti kerangka atau menu bertingkat. 

Untuk membuat list bersarang, kamu cukup menempatkan elemen <ul> atau <ol> di dalam elemen <li> dari list lain.

Berikut contoh list tak berurutan bertingkat:

<ul>
  <li>Item 1</li>
  <li>Item 2
    <ul>
      <li>Subitem 2.1</li>
      <li>Subitem 2.2</li>
    </ul>
  </li>
  <li>Item 3</li>
</ul>

Butir kedua berisi daftar bersarang dengan dua butir turunan. Di browser, tampilannya akan seperti ini:

  • Butir 1
  • Butir 2
    • Butir turunan 2.1
    • Butir turunan 2.2
  • Butir 3

Kamu juga bisa menyusun daftar berurutan di dalam daftar lain atau mencampur keduanya. 

challenge icon

Tantangan

Mudah

Buat dokumen HTML dengan daftar bersarang. Daftar tersebut harus terlihat seperti ini:

  • Fruits
    1. Apple
    2. Banana
    3. Orange
  • Vegetables
    • Carrot
    • Broccoli
    • Spinach
  • Grains

Letakkan setiap subdaftar di dalam <li> induknya, sebelum tag penutup </li> untuk item tersebut (misalnya <li>Fruits <ol>...</ol></li>).

Coba sendiri

<!DOCTYPE html>
<html>
    <body>
        <!-- Tulis kodemu di sini -->
    </body>
</html>
quiz iconUji dirimu

Pelajaran ini berisi kuis singkat. Mulai pelajarannya untuk menjawab kuis dan melacak progresmu.

Semua pelajaran di Dasar-Dasar

Latihan sendiri: Playground Web