HTML Lists Ul Ol Dl Nested

Ringkasan

List menyusun item terkait. ul (tak berurutan), ol (berurutan), dl (description list).

Konsep Dasar

• <ul><li> — bullet, urutan tidak penting.
• <ol><li> — nomor, urutan penting; atribut start, reversed, type.
• <dl><dt><dd> — pasangan istilah & deskripsi.
• List bisa bersarang (list di dalam li).

Cara Kerja / Struktur

html

<ul>
  <li>HTML</li>
  <li>CSS
    <ul><li>Flexbox</li><li>Grid</li></ul>
  </li>
</ul>
<ol start="3"><li>Install</li><li>Jalankan</li></ol>
<dl><dt>HTML</dt><dd>Bahasa markup</dd></dl>

Contoh Kode

html

<ol>
  <li>Siapkan folder</li>
  <li>Buat file index.html</li>
  <li>Jalankan di browser</li>
</ol>

Catatan Implementasi

• nav yang berisi link sering pakai ul.
• aria-current="page" untuk menandai item aktif di nav list.

Kesalahan Umum

• Pakai <div> untuk list padahal <ul>/ol lebih semantik.
• <li> langsung di luar <ul>/<ol> — tidak valid.

Glosarium

• Nested list: list di dalam list.
• Description list: pasangan istilah–definisi.

Referensi

• HTML Semantics dan Struktur Dokumen