List Terstruktur: Menguasai OL, UL, DL, dan Cara Modifikasinya

Dalam menyusun konten web, kita sering kali perlu menyajikan informasi secara poin-per-poin agar lebih mudah dipahami pembaca. HTML menyediakan tiga jenis daftar (list) utama yang memiliki fungsi semantik berbeda. Memilih jenis list yang tepat bukan hanya soal tampilan, tapi juga membantu mesin pencari dan teknologi asisten memahami konteks data Anda.

Mari kita bedah ketiga jenis list tersebut beserta teknik modifikasinya.

1. Unordered List (<ul>): Daftar Tanpa Urutan

Daftar ini digunakan untuk poin-poin yang urutannya bisa ditukar-tukar tanpa mengubah makna. Secara default, browser menampilkan simbol peluru (bullet points).

• Penggunaan Umum: Daftar fitur, menu navigasi, atau daftar belanja.

Contoh Kode:

<ul> <li>Laravel Framework</li> <li>MySQL Database</li> <li>Tailwind CSS</li>
</ul>

2. Ordered List (<ol>): Daftar Berurutan

Daftar ini digunakan untuk informasi yang memiliki tahapan atau peringkat tertentu. Browser akan menampilkan angka secara otomatis.

• Penggunaan Umum: Langkah-langkah tutorial, resep masakan, atau daftar pemenang lomba.

Contoh Kode:

<ol> <li>Install Laravel Herd</li> <li>Buat Database Baru</li> <li>Jalankan Migrasi</li>
</ol>

3. Description List (<dl>): Daftar Deskripsi

Jenis list ini unik karena terdiri dari pasangan istilah (<dt>) dan penjelasannya (<dd>).

• Penggunaan Umum: Glosarium istilah teknis, daftar FAQ, atau spesifikasi produk.

Contoh Kode:

<dl> <dt>API</dt> <dd>Antarmuka yang memungkinkan dua aplikasi saling berkomunikasi.</dd> <dt>Endpoint</dt> <dd>Alamat URL spesifik untuk mengakses layanan API.</dd>
</dl>

4. Cara Modifikasi List (Atribut & CSS)

Anda dapat mengubah perilaku standar list menggunakan atribut HTML atau gaya CSS:

A. Modifikasi Tipe Angka/Peluru (Atribut type & start)

Pada <ol>, Anda bisa mengubah angka menjadi huruf atau angka romawi menggunakan atribut:

• <ol type="A"> : Mengubah menjadi huruf kapital (A, B, C...)

• <ol type="i"> : Mengubah menjadi angka romawi kecil (i, ii, iii...)

• <ol start="5"> : Memulai urutan list langsung dari angka 5

B. Modifikasi via CSS (Lebih Profesional)

Untuk mengubah tampilan secara total, gunakan properti list-style-type di CSS:

ul { list-style-type: square; /* Mengubah bullet menjadi kotak */
} ol { list-style-type: lower-alpha; /* Sama dengan type="a" */
} /* Menghilangkan tanda list (sering digunakan untuk menu navigasi) */
nav ul { list-style-type: none; padding: 0;
}

Tutorial: Membuat List Bertingkat (Nested List)

Terkadang kita perlu membuat daftar di dalam daftar (sub-poin). Berikut cara penulisannya yang benar:

<ul> <li>Backend Developer <ul> <li>Laravel (Spesialisasi)</li> <li>Node.js</li> </ul> </li> <li>Frontend Developer</li>
</ul>

Penting: Pastikan tag <ul> (atau <ol>) kedua berada di dalam tag <li>, bukan di luarnya.

Tabel Ringkasan Penggunaan

Kesimpulan

List adalah cara paling efektif untuk merapikan informasi yang padat. Gunakan <ul> untuk koleksi data umum, <ol> untuk prosedur teknis, dan <dl> untuk penjelasan istilah. Dengan pemahaman tentang atribut dan CSS, Anda bisa mengubah daftar yang membosankan menjadi elemen navigasi atau informasi yang visualnya menarik.