Panduan Lengkap Ordered List di HTML: Dari Dasar sampai Mahir (Tutorial HTML Part 33)

Ordered list di HTML itu simpel, tapi punya banyak trik keren buat bikin tampilan daftar makin kece. Di artikel ini, kita bakal bahas semua yang perlu kamu tahu tentang ordered list di HTML, mulai dari tipe numbering, kontrol urutan, sampai nested list. Yuk, langsung gas!

1. Apa Itu Ordered List di HTML?

Ordered list atau daftar berurutan adalah daftar yang item-itemnya ditampilkan dengan nomor atau huruf, tergantung setting yang kamu pakai. Di HTML, kita pakai tag <ol> buat bikin ordered list dan <li> buat setiap item dalam daftar.

Contoh dasar ordered list:

<ol>
  <li>Belajar HTML</li>
  <li>Belajar CSS</li>
  <li>Belajar JavaScript</li>
</ol>

Hasilnya bakal keliatan kayak gini:

2. Ordered List – The Type Attribute

Nah, kalau mau ngatur tipe numbering-nya, kamu bisa pakai atribut type pada <ol>. Ada beberapa pilihan tipe numbering:

• type=”1″ → 1, 2, 3, 4, … (default)
• type=”A” → A, B, C, D, …
• type=”a” → a, b, c, d, …
• type=”I” → I, II, III, IV, …
• type=”i” → i, ii, iii, iv, …

Contoh penggunaan:

<ol type="A">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ol>

Hasilnya:

3. Kontrol Urutan Numbering

Kalau mau mulai nomor dari angka atau huruf tertentu, gunakan atribut start di <ol>.

Contoh mulai dari angka 5:

<ol start="5">
  <li>Item pertama</li>
  <li>Item kedua</li>
</ol>

Hasilnya:

Bisa juga pakai reversed biar numbering-nya mundur:

<ol reversed>
  <li>Item terakhir</li>
  <li>Item kedua</li>
  <li>Item pertama</li>
</ol>

Hasilnya:

4. Nested HTML Lists

Kadang kita butuh daftar di dalam daftar. Nah, ini disebut nested list. Gampang banget bikinnya, tinggal tambahin <ol> atau <ul> di dalam <li>.

Contoh nested list:

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

Hasilnya:

5. Ringkasan

Biar nggak lupa, ini poin-poin penting yang kita pelajari:

• Ordered list pakai <ol>, tiap item pakai <li>.
• Bisa diatur numbering-nya pakai type (1, A, a, I, i).
• Bisa mulai dari angka tertentu pakai start.
• Bisa mundur pakai reversed.
• Bisa dibuat bertingkat pakai nested list.

6. Tag HTML yang Berkaitan dengan List

Selain <ol> dan <li>, ada beberapa tag lain yang berguna buat bikin daftar:

• <ul> → Unordered list (daftar tanpa urutan, biasanya pakai bullet).
• <dl> → Definition list (buat daftar istilah dan penjelasannya).
• <dt> → Definition term (istilah dalam <dl>).
• <dd> → Definition description (penjelasan istilah dalam <dl>).

Sekian dulu panduan ordered list di HTML. Semoga makin jago dan makin kece bikin list di website kamu! Selamat ngoding!