Selamat datang di seri “Belajar HTML” bagian kesembilan! Setelah kita menguasai cara menghubungkan halaman dengan link, sekarang kita akan mempelajari cara mengorganisir konten ke dalam bentuk daftar atau list. Dalam kehidupan sehari-hari, kita sering menggunakan daftar: daftar belanjaan, langkah-langkah resep, atau daftar isi.

HTML menyediakan elemen khusus untuk membuat daftar, yang tidak hanya membuat tampilan lebih rapi, tetapi juga memberikan makna struktur yang lebih baik pada konten Anda. Ini penting untuk SEO dan aksesibilitas.

Ada tiga jenis utama list di HTML yang akan kita bahas:

1. Unordered List (Daftar tak berurutan)
2. Ordered List (Daftar berurutan)
3. Description List (Daftar deskripsi)

1. Unordered List (<ul>)

Unordered list digunakan untuk item-item di mana urutannya tidak penting. Secara default, browser akan menampilkannya sebagai daftar dengan bullet points (bulatan hitam).

Tag yang digunakan:

• <ul> (Unordered List): Sebagai pembungkus utama daftar.
• <li> (List Item): Untuk setiap item di dalam daftar.

Contoh: Daftar belanjaan buah.

<h3>Daftar Belanja Buah</h3>
<ul>
  <li>Apel</li>
  <li>Jeruk</li>
  <li>Mangga</li>
  <li>Anggur</li>
</ul>

Hasilnya di browser:

<h3>Daftar Belanja Buah</h3> <ul> <li>Apel</li> <li>Jeruk</li> <li>Mangga</li> <li>Anggur</li> </ul>

2. Ordered List (<ol>)

Ordered list digunakan ketika urutan item sangat penting, seperti langkah-langkah dalam sebuah instruksi atau peringkat. Secara default, browser akan menampilkannya sebagai daftar dengan penomoran (1, 2, 3, …).

Tag yang digunakan:

• <ol> (Ordered List): Sebagai pembungkus utama daftar.
• <li> (List Item): Ya, tag yang sama untuk setiap itemnya!

Contoh: Langkah-langkah menyeduh kopi.

<h3>Cara Menyeduh Kopi</h3>
<ol>
  <li>Rebus air hingga mendidih.</li>
  <li>Masukkan kopi ke dalam cangkir.</li>
  <li>Tuangkan air panas ke dalam cangkir.</li>
  <li>Aduk hingga rata dan kopi siap dinikmati.</li>
</ol>

Hasilnya di browser:

<h3>Cara Menyeduh Kopi</h3> <ol> <li>Rebus air hingga mendidih.</li> <li>Masukkan kopi ke dalam cangkir.</li> <li>Tuangkan air panas ke dalam cangkir.</li> <li>Aduk hingga rata dan kopi siap dinikmati.</li> </ol>

Kustomisasi Ordered List

Anda bisa mengubah jenis penomoran pada <ol> menggunakan atribut type.

• type="1": Angka (default)
• type="A": Huruf kapital (A, B, C)
• type="a": Huruf kecil (a, b, c)
• type="I": Angka Romawi kapital (I, II, III)
• type="i": Angka Romawi kecil (i, ii, iii)

Anda juga bisa menggunakan atribut start untuk memulai penomoran dari angka tertentu, dan reversed untuk membalik urutan.

<ol type="A" start="3">
  <li>Item pertama (ditampilkan sebagai C)</li>
  <li>Item kedua (ditampilkan sebagai D)</li>
</ol>

<ol reversed>
  <li>Tiga</li>
  <li>Dua</li>
  <li>Satu</li>
</ol>

3. Description List (<dl>)

Jenis daftar ini sedikit berbeda. Description list digunakan untuk menyajikan pasangan istilah dan deskripsinya, seperti kamus atau glosarium.

Tag yang digunakan:

• <dl> (Description List): Pembungkus utama.
• <dt> (Description Term): Istilah atau kata kunci yang ingin didefinisikan.
• <dd> (Description Details): Deskripsi atau definisi dari istilah tersebut.

Contoh: Glosarium istilah web.

<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language, bahasa standar untuk membuat halaman web.</dd>
  
  <dt>CSS</dt>
  <dd>Cascading Style Sheets, bahasa untuk mengatur tampilan dan gaya dokumen HTML.</dd>
</dl>

Browser biasanya akan menampilkan <dd> dengan sedikit inden (menjorok ke dalam).

Nested List (Daftar Bersarang)

Anda juga bisa meletakkan satu daftar di dalam daftar lainnya. Ini disebut nested list. Caranya adalah dengan menempatkan tag <ul> atau <ol> baru di dalam sebuah tag <li>.

Ini sangat umum digunakan untuk membuat menu navigasi website dengan submenu.

Contoh: Daftar menu makanan.

<ul>
  <li>Makanan
    <ol>
      <li>Nasi Goreng</li>
      <li>Sate Ayam</li>
      <li>Gado-gado</li>
    </ol>
  </li>
  <li>Minuman
    <ul>
      <li>Es Teh</li>
      <li>Jus Jeruk</li>
      <li>Kopi</li>
    </ul>
  </li>
</ul>

Kesimpulan & Praktik Terbaik

1. Gunakan Sesuai Makna: Pilihlah jenis list yang paling sesuai dengan makna konten Anda. Jika urutan penting, gunakan <ol>. Jika tidak, gunakan <ul>.
2. Universal <li>: Ingat bahwa <li> adalah tag universal untuk item di dalam <ul> dan <ol>.
3. Styling dengan CSS: Jangan terpaku pada tampilan default (bulatan dan angka). Nanti, dengan CSS, Anda bisa mengubah simbol bullet, menghilangkan penomoran, atau menata daftar menjadi menu horizontal. Yang terpenting di HTML adalah strukturnya benar.

Menggunakan list dengan benar akan membuat konten Anda jauh lebih terstruktur, mudah dibaca, dan ramah untuk mesin pencari. Sampai jumpa di pelajaran selanjutnya!