Setelah menguasai paragraf dan heading HTML, list merupakan struktur teks berikutnya yang penting karena banyak informasi sebenarnya bukan sekadar kumpulan kalimat, melainkan sekumpulan item yang memiliki hubungan tertentu. Kesalahan umum pemula adalah membuat daftar dengan beberapa paragraf, mengetik tanda minus secara manual, atau menambahkan nomor seperti “1.” langsung ke teks. Secara visual cara tersebut mungkin terlihat seperti daftar, tetapi struktur dokumennya tidak menyatakan bahwa item-item tersebut memang satu kelompok. HTML menyediakan elemen semantik khusus untuk menyelesaikan masalah itu. Elemen <ul> mewakili unordered list ketika urutan item tidak menentukan makna, sedangkan <ol> mewakili ordered list ketika urutan disengaja atau penting. Keduanya menggunakan <li> sebagai item daftar. Untuk pasangan istilah dan penjelasannya, HTML menyediakan description list melalui <dl>, <dt>, dan <dd>. Memilih elemen berdasarkan arti konten menghasilkan markup yang lebih mudah dipelihara dan memberi browser serta teknologi bantu informasi struktur yang tidak tersedia jika bullet atau nomor diketik manual. Prinsip ini sangat berguna untuk menu fitur, tahapan tutorial, daftar persyaratan, glosarium, metadata, hingga daftar bertingkat. Pemahaman yang benar juga memisahkan dua persoalan: HTML menentukan struktur dan makna daftar, sementara CSS dapat mengatur penampilan marker, jarak, indentasi, atau gaya visualnya.
Artikel ini membangun kemampuan tersebut secara bertahap. Anda akan menentukan terlebih dahulu apakah suatu informasi membutuhkan urutan, kemudian membuat unordered list dan ordered list yang valid, memahami atribut penting pada ordered list, menggunakan description list untuk relasi istilah-deskripsi, serta membuat nested list tanpa merusak hierarki HTML. Setiap contoh dapat diuji dengan menyimpannya sebagai bagian dari dokumen HTML dan membukanya di browser. Indikator keberhasilannya bukan hanya munculnya bullet atau nomor: source harus mempunyai parent dan child yang benar, setiap item <ul> atau <ol> harus direpresentasikan dengan <li>, dan nested list harus ditempatkan di dalam item yang menaunginya. Untuk description list, <dt> menyatakan istilah atau nama dan <dd> menyatakan deskripsinya. Dengan aturan sederhana tersebut, Anda dapat membangun daftar yang tetap masuk akal ketika CSS dihilangkan serta dapat dikembangkan menjadi struktur yang lebih kompleks tanpa bergantung pada spasi, karakter bullet manual, atau tag <br> sebagai pengganti struktur.
Landasan Sains dan Prinsip Kerja Metode
Prinsip pertama adalah semantik dokumen. HTML mendeskripsikan struktur dan arti konten kepada user agent, bukan sekadar menentukan tampilannya. Pada unordered list, hubungan utama adalah sebuah kumpulan item yang urutannya tidak signifikan. Daftar “HTML, CSS, JavaScript”, misalnya, dapat menjadi <ul> apabila hanya menyatakan kumpulan teknologi tanpa prioritas tertentu. Ordered list menyatakan bahwa item sengaja diurutkan; perubahan posisi dapat mengubah interpretasi, sehingga cocok untuk langkah prosedur, peringkat, atau urutan kejadian. Marker angka yang biasanya diberikan browser adalah presentasi default dari struktur tersebut, bukan alasan utama memilih <ol>. Karena itu, kebutuhan akan bullet bulat tidak otomatis berarti konten harus menjadi unordered list, dan kebutuhan akan angka tidak semestinya diselesaikan dengan mengetik angka di paragraf. Description list mempunyai model berbeda: isinya berupa kelompok nama atau istilah dan deskripsi atau nilai yang berkaitan. Model ini memungkinkan satu istilah berhubungan dengan satu atau lebih deskripsi dan dapat digunakan untuk glosarium atau pasangan nama-nilai yang sesuai secara semantik. Menentukan elemen dari hubungan logis konten terlebih dahulu membuat markup lebih tahan terhadap perubahan desain.
Prinsip kedua adalah hierarki pohon DOM. Browser mem-parsing markup HTML menjadi struktur node dengan hubungan parent, child, dan sibling. Pada <ul> dan <ol>, elemen <li> membentuk unit item. Jika sebuah item mempunyai subdaftar, nested <ul> atau <ol> ditempatkan di dalam <li> induk yang relevan, bukan sebagai sibling bebas di antara item-item tingkat atas. Contohnya, kategori “Frontend” dapat menjadi satu <li> yang di dalamnya berisi daftar “HTML” dan “CSS”. Hubungan pohon tersebut mengungkapkan bahwa kedua teknologi adalah anak konseptual dari Frontend. Struktur DOM juga menjelaskan mengapa indentasi source code membantu manusia tetapi bukan pembentuk struktur: browser menentukan hierarki melalui elemen dan aturan parsing, bukan jumlah spasi pada awal baris. Penulisan tag penutup secara eksplisit sangat dianjurkan bagi pemula meskipun beberapa tag HTML tertentu dapat memiliki aturan penghilangan tag dalam kondisi yang ditentukan spesifikasi. Markup eksplisit lebih mudah dibaca dan mengurangi kekeliruan saat daftar mulai mempunyai elemen lain atau level bersarang.
Prinsip ketiga berkaitan dengan aksesibilitas dan pemisahan struktur dari presentasi. Elemen daftar native membawa semantik yang dapat dimanfaatkan accessibility tree dan teknologi bantu untuk memahami bahwa sejumlah item membentuk suatu list. Ini lebih informatif dibanding rangkaian <p> dengan karakter “•” di awal teks. Namun semantik yang benar tetap bergantung pada pemilihan tipe list sesuai isi, bukan sekadar penggunaan tag list di semua tempat. CSS kemudian dapat mengatur aspek visual seperti list-style-type, posisi marker, margin, atau padding tanpa perlu mengganti struktur semantik hanya demi penampilan. Pemisahan ini mempermudah maintenance: desain marker dapat berubah sementara hubungan konten tetap sama. Validasi juga penting sebagai kontrol kualitas. Browser sering mampu melakukan error recovery terhadap HTML yang tidak sempurna, sehingga halaman yang terlihat “normal” belum tentu memiliki struktur yang Anda maksud. Pemeriksaan DOM melalui Developer Tools dan HTML validator dapat membantu menemukan nesting salah, tag yang tidak tepat, atau susunan elemen yang bermasalah sebelum markup digunakan dalam proyek yang lebih besar.
Formula, Komposisi Bahan, atau Spesifikasi Parameter
Untuk list HTML, “spesifikasi parameter” berarti elemen dan atribut yang menentukan struktur serta perilaku semantik daftar. Tabel berikut dapat digunakan sebagai referensi cepat saat memilih markup.
| Komponen | Spesifikasi/Rasio | Fungsi Teknis |
|---|---|---|
| <ul> | Unordered list | Mengelompokkan item ketika urutannya tidak signifikan. |
| <ol> | Ordered list | Mengelompokkan item dengan urutan yang disengaja. |
| <li> | Item pada ul atau ol | Mendefinisikan setiap item dalam ordered atau unordered list. |
| <dl> | Description list | Membungkus kelompok istilah/nama dan deskripsinya. |
| <dt> | Term/name | Mendefinisikan istilah atau nama di dalam description list. |
| <dd> | Description/value | Mendefinisikan deskripsi atau nilai terkait nama/istilah. |
| start | Integer pada <ol> | Menentukan nilai awal penomoran ordered list. |
| reversed | Atribut boolean <ol> | Membuat penomoran ordered list berjalan menurun. |
| value | Integer pada <li> di ordered list | Mengatur nilai ordinal item tertentu. |
| type | 1, a, A, i, atau I pada <ol> | Menentukan jenis marker penomoran ordered list. |
Panduan Langkah Kerja Bertahap
Tentukan Makna dan Jenis Daftar
Mulailah dari pertanyaan semantik: apakah perubahan urutan item mengubah arti? Jika tidak, pilih <ul>. Daftar perlengkapan seperti keyboard, mouse, dan monitor biasanya tidak membutuhkan posisi numerik. Jika posisi menyampaikan urutan prosedur, kronologi, peringkat, atau prioritas, pilih <ol>. Jika konten merupakan pasangan istilah dan penjelasan, pertimbangkan <dl>. Contoh paling sederhana untuk koleksi tanpa urutan adalah <ul><li>HTML</li><li>CSS</li></ul>. Untuk prosedur, gunakan <ol><li>Buka editor</li><li>Simpan file</li></ol>. Jangan memilih tag berdasarkan bentuk marker default karena CSS dapat mengubah visual marker. Verifikasi pilihan Anda dengan membacakan hubungan item tanpa melihat tampilannya: bila “pertama” dan “kedua” diperlukan agar makna tetap utuh, ordered list tepat; bila item dapat ditukar tanpa konsekuensi semantik, unordered list biasanya lebih tepat.
Buat Unordered List dengan Struktur yang Valid
Tulis elemen <ul>, kemudian tempatkan setiap item dalam elemen <li>. Contohnya adalah <ul><li>HTML</li><li>CSS</li><li>JavaScript</li></ul>. Browser biasanya menampilkan marker bullet dan indentasi melalui stylesheet bawaannya, tetapi tampilan tersebut dapat berbeda dan bukan bagian dari makna semantik list. Hindari pola <ul>HTML<br>CSS</ul> karena teks tidak dibuat sebagai item list yang terstruktur. Jika isi suatu item membutuhkan teks tambahan, <li> dapat berisi konten yang sesuai, bukan hanya satu kata. Setelah menyimpan file, buka di browser dan pastikan terdapat tiga item. Gunakan Developer Tools bila tersedia dan periksa bahwa node ul mempunyai tiga elemen li pada level tersebut. Pengujian ini lebih dapat dipercaya daripada sekadar melihat tiga bullet karena tampilan visual tidak selalu mengungkap struktur DOM yang keliru.
Buat Ordered List dan Atur Penomorannya
Untuk urutan bermakna, gunakan pola <ol><li>Buat file</li><li>Tulis HTML</li><li>Buka di browser</li></ol>. Secara default marker ordered list menggunakan angka desimal. Bila urutan harus dimulai dari nilai tertentu, atribut start dapat digunakan, misalnya <ol start="4">...</ol>. Atribut boolean reversed menghasilkan urutan menurun, sedangkan atribut value pada <li> dapat menetapkan nilai ordinal item tertentu. Atribut type pada <ol> mendukung jenis marker seperti 1, A, a, I, dan i. Gunakan fitur tersebut ketika mempunyai alasan representasional atau struktural yang jelas, bukan untuk mensimulasikan layout. Verifikasi dengan memastikan jumlah item benar, urutan sumber sesuai proses sebenarnya, dan marker browser mencerminkan nilai yang Anda tentukan. Ingat bahwa angka tampilan tidak menggantikan teks instruksi yang jelas: setiap <li> tetap harus dapat dipahami sebagai langkah.
Bangun Description List untuk Istilah dan Deskripsi
Gunakan <dl> ketika hubungan kontennya berupa nama atau istilah dengan deskripsi atau nilai terkait. Struktur dasar dapat ditulis sebagai <dl><dt>HTML</dt><dd>Bahasa markup untuk struktur konten web.</dd><dt>CSS</dt><dd>Bahasa stylesheet untuk presentasi dokumen.</dd></dl>. Jangan mengganti <dt> dengan heading hanya karena ingin istilah terlihat tebal; penampilan dapat diatur dengan CSS sedangkan <dt> menjelaskan relasi di dalam description list. Description list juga lebih fleksibel daripada asumsi “satu istilah selalu satu deskripsi”, karena modelnya dapat merepresentasikan kelompok nama dan nilai/deskripsi yang berkaitan. Gunakan pola tersebut hanya ketika hubungan konten memang sesuai, bukan sebagai pengganti layout dua kolom secara umum. Untuk memverifikasi, periksa DOM dan pastikan dt serta dd berada di dalam dl sesuai pengelompokan yang Anda inginkan. Baca kontennya tanpa styling; relasi istilah dan definisi harus tetap jelas.
Buat Nested List dengan Hierarki yang Benar
Daftar bertingkat digunakan ketika satu item mempunyai subitem. Struktur yang tepat, misalnya, adalah <ul><li>Frontend<ul><li>HTML</li><li>CSS</li></ul></li></ul>. Perhatikan bahwa <ul> kedua berada di dalam <li>Frontend, karena subdaftar tersebut merupakan bagian dari item Frontend. Kesalahan yang sering terjadi adalah menutup <li> terlebih dahulu kemudian meletakkan list anak sebagai sibling yang tidak merepresentasikan hubungan konseptual yang dimaksud. Anda juga dapat mencampurkan tipe daftar ketika semantiknya mendukung, misalnya sebuah unordered list kategori yang salah satu itemnya berisi ordered list langkah. Jangan menambah level hanya untuk menghasilkan indentasi visual; nesting harus mencerminkan hierarki informasi. Untuk verifikasi, buka panel Elements pada Developer Tools dan kembangkan node daftar. Pastikan list level kedua benar-benar menjadi descendant dari item level pertama yang tepat, lalu periksa bahwa tiap level berisi item yang sesuai.
Validasi Struktur dan Pisahkan Styling
Setelah struktur selesai, uji halaman tanpa mengandalkan penampilan. Contoh gabungan yang baik dapat berupa <ol><li>Pelajari heading</li><li>Pelajari list<ul><li>Ordered</li><li>Unordered</li></ul></li></ol>. Baca source dari atas ke bawah, cocokkan setiap tag pembuka dan penutup, lalu inspect DOM hasil parsing browser. Gunakan validator HTML yang sesuai bila proyek memerlukan pemeriksaan sintaks lebih sistematis. Setelah semantik benar, styling marker dan jarak dapat ditangani melalui CSS; jangan mengubah <ol> menjadi <ul> hanya karena desain meminta bentuk marker berbeda. Uji juga dengan CSS dinonaktifkan bila memungkinkan. Informasi harus masih mempunyai urutan dan pengelompokan yang masuk akal. Kriteria keberhasilan akhirnya adalah struktur yang sesuai makna, tidak bergantung pada karakter bullet atau nomor manual, nested list mempunyai parent yang benar, dan source cukup jelas sehingga pengembang lain dapat mengenali hubungan item tanpa menebak dari tampilannya.
Verifikasi Akhir dan Parameter Kelayakan
Gunakan pemeriksaan berikut sebelum menganggap implementasi selesai. Targetnya adalah HTML yang tetap bermakna pada level source dan DOM, bukan sekadar daftar yang secara visual terlihat benar.
| Parameter | Sebelum Menerapkan Metode | Sesudah Menerapkan Metode (Target) |
|---|---|---|
| Pemilihan tipe list | Dipilih berdasarkan bullet atau angka visual | Dipilih berdasarkan hubungan dan signifikansi urutan |
| Item ul/ol | Teks, br, atau bullet manual | Setiap item direpresentasikan dengan li |
| Description list | Istilah dan definisi dibuat sebagai paragraf bebas | Relasi yang sesuai memakai dl, dt, dan dd |
| Nested list | Sublist tidak terhubung jelas dengan item induk | Sublist berada di dalam li induk yang relevan |
| Presentasi | Struktur HTML dipilih demi tampilan | Semantik ditentukan di HTML dan presentasi ditangani CSS |
Solusi Masalah di Lapangan (FAQ Teknis)
1. Mengapa bullet unordered list tidak muncul?
Periksa terlebih dahulu struktur <ul> dan <li>. Jika DOM benar tetapi marker tidak terlihat, CSS dapat menjadi penyebab, misalnya aturan list-style: none atau pengaturan layout tertentu. Inspect computed styles melalui Developer Tools. Jangan menambah karakter “•” secara manual sebagai perbaikan sebelum mengetahui penyebabnya karena hal tersebut mencampurkan konten dengan presentasi.
2. Kapan harus menggunakan ol daripada ul?
Gunakan <ol> ketika urutan item sengaja ditetapkan dan relevan terhadap pemahaman, seperti prosedur atau peringkat. Gunakan <ul> untuk kumpulan item ketika pertukaran posisi tidak mengubah makna utama. Bentuk marker visual bukan kriteria semantik karena presentasinya dapat disesuaikan dengan CSS.
3. Bolehkah memasukkan list ke dalam list lain?
Boleh ketika terdapat hubungan hierarkis. Untuk <ul> atau <ol>, letakkan list anak di dalam <li> induk yang menaungi subitem tersebut. Anda dapat menggunakan tipe yang sama atau berbeda sesuai maknanya. Hindari nesting hanya untuk memperoleh indentasi karena CSS lebih tepat untuk kebutuhan visual murni.
4. Apa perbedaan dl dengan ul yang berisi istilah?<ul> merepresentasikan kumpulan item tanpa urutan signifikan, sedangkan <dl> merepresentasikan kelompok nama atau istilah dan deskripsi atau nilai yang terkait menggunakan <dt> serta <dd>. Karena hubungan semantiknya berbeda, pilih berdasarkan model informasi. Glosarium merupakan contoh penggunaan description list yang alami, sementara daftar teknologi tanpa definisi lebih sesuai sebagai unordered list.
Kesimpulan dan Rencana Aksi
Kemampuan membuat list HTML berpusat pada satu keputusan: representasikan hubungan informasi, bukan sekadar penampilannya. Gunakan <ul> bersama <li> untuk kumpulan yang tidak membutuhkan urutan, <ol> bersama <li> ketika urutan bermakna, serta <dl>, <dt>, dan <dd> untuk kelompok istilah/nama dan deskripsi/nilai yang sesuai. Gunakan start, reversed, value, atau type pada ordered list hanya ketika fitur tersebut benar-benar diperlukan. Untuk hierarki, tempatkan nested list di dalam item induknya. Rencana latihan hari ini adalah membuat tiga contoh terpisah—daftar perlengkapan dengan <ul>, prosedur tiga tahap dengan <ol>, dan glosarium kecil dengan <dl>—kemudian gabungkan salah satunya menjadi nested list. Buka hasilnya di browser, inspect DOM, dan pastikan struktur masih mudah dipahami tanpa mengandalkan CSS. Setelah pola tersebut konsisten, Anda mempunyai fondasi yang tepat untuk menggunakan daftar dalam navigasi, dokumentasi, artikel, tutorial, daftar fitur, dan struktur konten web yang lebih kompleks.
Ditulis dan diedit oleh Ahmad Ismail Al Malik