HTML Academy · Pelajaran

Daftar Bertingkat dan Styling Daftar

Buat daftar di dalam daftar dan atur tampilannya.

Daftar Bertingkat dan Styling Daftar adalah pelajaran HTML Academy gratis di CoddyKit. Ini adalah pelajaran 4 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar HTML Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus HTML Academy mencakup 4 pelajaran total.

Daftar Bersarang

Daftar dapat dibuat bersarang di dalam elements <li>:

<ul>
  <li>Frontend
    <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
    </ul>
  </li>
  <li>Backend
    <ul>
      <li>Node.js</li>
      <li>Python</li>
    </ul>
  </li>
</ul>

Penyusunan Bersarang yang Benar

Daftar bersarang harus berada inside elemen <li>, bukan sebagai anak langsung dari <ul> atau <ol>:

<!-- WRONG: nested ul as direct child of outer ul -->
<ul>
  <ul>   <!-- INVALID -->
    <li>Item</li>
  </ul>
</ul>

<!-- CORRECT: nested ul inside li -->
<ul>
  <li>
    Parent item
    <ul>
      <li>Child item</li>
    </ul>
  </li>
</ul>

Gaya Bullet Multi-Tingkat

Browser menerapkan bullet bawaan yang berbeda pada setiap tingkat bersarang:

<ul>
  <li>Level 1 — disc (filled circle)</li>  <!--  • -->
  <ul>
    <li>Level 2 — circle (open circle)</li>  <!--  ○ -->
    <ul>
      <li>Level 3 — square</li>             <!--  ▪ -->
    </ul>
  </ul>
</ul>

Mengatur Ulang dengan CSS

Timpa gaya daftar bersarang dengan CSS:

ul, ol {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Style each level explicitly */
.nav > li > ul {
  padding-left: 1rem;
  list-style: disc;
}

Daftar Bersarang Bernomor

Daftar berurutan bersarang dengan jenis yang berbeda:

<ol type="1">
  <li>Introduction
    <ol type="a">
      <li>Background</li>
      <li>Motivation</li>
    </ol>
  </li>
  <li>Methods
    <ol type="a">
      <li>Data collection</li>
    </ol>
  </li>
</ol>

Penghitung CSS untuk Penomoran Khusus

Penomoran hierarkis khusus dengan penghitung CSS:

ol {
  list-style: none;
  counter-reset: level1;
}
ol > li { counter-increment: level1; }
ol > li::before { content: counter(level1) '. '; }

ol ol {
  counter-reset: level2;
}
ol ol > li { counter-increment: level2; }
ol ol > li::before {
  content: counter(level1) '.' counter(level2) ' ';
}

Pola Navigasi Akordeon

Daftar bersarang dapat menjadi navigasi bilah sisi yang dapat diperluas:

<ul class="tree-nav">
  <li>
    <details>
      <summary>Frontend</summary>
      <ul>
        <li><a href="/html">HTML</a></li>
        <li><a href="/css">CSS</a></li>
      </ul>
    </details>
  </li>
  <li><a href="/backend">Backend</a></li>
</ul>

Jarak pada Daftar Bersarang

Atur indentasi visual dengan CSS:

ul {
  padding-left: 1.5rem;  /* Controls indent at each level */
  margin: 0.5rem 0;
}

/* Tighter nested spacing */
ul ul {
  margin: 0.25rem 0;
  padding-left: 1.25rem;
}

Tinjauan Singkatan list-style

Semua properti gaya daftar yang digabungkan:

/* Shorthand: type position image */
ul {
  list-style: square inside;
}

/* Longhand equivalents: */
ul {
  list-style-type: square;
  list-style-position: inside;   /* inside or outside */
  list-style-image: none;
}

Ikon Khusus sebagai Penanda Daftar

Gunakan SVG atau emoji sebagai penanda daftar:

ul.checklist {
  list-style: none;
  padding: 0;
}

ul.checklist li::before {
  content: '✓ ';
  color: #22c55e;
  font-weight: bold;
}

/* Or with a background SVG */
ul.icon-list li {
  padding-left: 2rem;
  background: url('/icons/arrow.svg') no-repeat 0 0.2em;
  background-size: 1rem 1rem;
  list-style: none;
}

Aksesibilitas Daftar Bersarang

Daftar bersarang dan pembaca layar:

Pembaca layar mengumumkan tingkat bersarang dan jumlah item
Bersarang terlalu dalam (4+ tingkat) membingungkan — batasi hingga maksimal 2-3 tingkat
Jika menggunakan list-style: none pada daftar luar, tambahkan role="list"

Pemeriksaan Singkat

Di mana daftar bersarang harus ditempatkan di dalam daftar luar?

Rangkuman: Daftar Bersarang

Hal penting tentang daftar bersarang:

Sarang daftar di dalam <li> — jangan langsung di dalam <ul>
Secara default, browser menggunakan: cakram → lingkaran → persegi pada setiap tingkat
Penghitung CSS memungkinkan penomoran hierarkis khusus
Batasi penyusunan bersarang hingga 2–3 tingkat agar mudah digunakan
Gunakan <details>+<summary> untuk navigasi bersarang yang dapat diperluas

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Daftar Bertingkat dan Styling Daftar” gratis?

Ya — teks lengkap “Daftar Bertingkat dan Styling Daftar” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus HTML Academy, upgrade ke CoddyKit PRO. Kursus HTML Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Daftar Bertingkat dan Styling Daftar”?

Buat daftar di dalam daftar dan atur tampilannya. Kamu berlatih HTML Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai HTML Academy?

Tidak diperlukan pengalaman sebelumnya. HTML Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 4 dari 4.

Berapa lama pelajaran “Daftar Bertingkat dan Styling Daftar” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran HTML Academy ini?

Ya. Setiap pelajaran HTML Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke HTML Academy