HTML tidak hanya digunakan untuk membuat struktur dasar pada halaman web, namun juga memfasilitasi pembuatan list yang terstruktur. Dalam pembuatan list, HTML menyediakan dua jenis list, yaitu ordered list dan unordered list.
Ordered list digunakan ketika kita ingin membuat list dengan nomor atau angka yang berurutan. Nomor atau angka ini akan secara otomatis terurut berdasarkan urutan di mana item-item tersebut ditempatkan dalam list. Untuk membuat ordered list, kita menggunakan tag <ol> dan setiap item dalam list akan didefinisikan dengan tag <li>.
Sementara itu, unordered list digunakan ketika kita ingin membuat list dengan simbol-simbol atau ikon-ikon yang tidak berurutan. Simbol atau ikon yang digunakan bisa berupa titik, simbol kotak, atau bahkan gambar. Untuk membuat unordered list, kita menggunakan tag <ul> dan setiap item dalam list akan didefinisikan dengan tag <li>.
Yuk, mari kita pelajari lebih lanjut mengenai List ini
Ordered List
Mari belajar membuat ordered list pada HTML! Ordered list digunakan untuk membuat daftar yang memiliki nomor atau urutan tertentu. Kita dapat membuat ordered list dengan menggunakan tag <ol> dan tag <li> untuk setiap item dalam daftar.
Contoh implementasi kodenya sebagai berikut:
<ol>
<li>Item pertama</li>
<li>Item kedua</li>
<li>Item ketiga</li>
</ol>Hasil dari kode di atas adalah sebagai berikut:
- Item pertama
- Item kedua
- Item ketiga
Kita juga dapat mengubah jenis nomor atau urutan pada ordered list dengan menggunakan atribut pada tag <ol>. Berikut adalah beberapa jenis nomor atau urutan yang umum digunakan pada ordered list:
- Angka: digunakan sebagai default pada ordered list. Atribut yang digunakan adalah type=”1″.
- Huruf besar: Atribut yang digunakan adalah type=”A”.
- Huruf kecil: Atribut yang digunakan adalah type=”a”.
- Roman besar: Atribut yang digunakan adalah type=”I”.
- Roman kecil: Atribut yang digunakan adalah type=”i”.
Contoh implementasi untuk mengubah jenis nomor atau urutan pada ordered list sebagai berikut:
<ol type="A">
<li>Item pertama</li>
<li>Item kedua</li>
<li>Item ketiga</li>
</ol>Hasil dari kode di atas adalah sebagai berikut:
A. Item pertama B. Item kedua C. Item ketiga
Dengan menggunakan ordered list, kita dapat membuat daftar yang terstruktur dan mudah dibaca oleh pengguna. Selain itu, ordered list juga memberikan urutan atau nomor pada setiap item, sehingga memudahkan pembaca dalam mengikuti konten yang disajikan.
Unordered List
Jika kamu ingin membuat list item yang tidak memiliki urutan atau nomor tertentu, kamu bisa menggunakan unordered list. Tag yang digunakan untuk membuat unordered list adalah <ul>, dan setiap item dalam list ditandai dengan tag <li>. Berikut adalah contoh implementasi kodenya:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
Dalam kode di atas, kita menggunakan tag <ul> untuk membuat unordered list dan tag <li> untuk setiap item dalam list.
Selain itu, terdapat beberapa jenis unordered list yang dapat digunakan dalam HTML
Jenis-Jenis Unordered List
- Disc list: Jenis list yang default dan menggunakan lingkaran sebagai tanda bullet. Tag yang digunakan untuk membuat disc list adalah <ul>, dan CSS property yang dapat digunakan untuk mengubah bentuk tanda bullet adalah
list-style-type. - Circle list: Jenis list yang menggunakan lingkaran kosong sebagai tanda bullet. Tag yang digunakan untuk membuat circle list adalah <ul>, dan CSS property yang dapat digunakan untuk mengubah bentuk tanda bullet adalah
list-style-type. - Square list: Jenis list yang menggunakan kotak sebagai tanda bullet. Tag yang digunakan untuk membuat square list adalah <ul>, dan CSS property yang dapat digunakan untuk mengubah bentuk tanda bullet adalah
list-style-type.
Berikut adalah contoh implementasi kodenya:
<!-- Disc list -->
<ul style="list-style-type: disc;">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<!-- Circle list -->
<ul style="list-style-type: circle;">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<!-- Square list -->
<ul style="list-style-type: square;">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>Dalam kode di atas, kita menggunakan CSS property list-style-type untuk mengubah bentuk tanda bullet pada setiap jenis list.
Dalam penggunaan list, pastikan urutan atau tidaknya item list dipilih sesuai dengan konteks dan tujuan yang diinginkan. Hal ini akan membuat struktur konten kamu lebih mudah dibaca dan dimengerti oleh pengguna.
Kesimpulan
Dalam HTML, list merupakan elemen yang penting untuk membantu struktur konten dan memudahkan pembaca untuk membaca informasi secara terstruktur. Ada dua jenis list di HTML, yaitu ordered list dan unordered list. Ordered list digunakan untuk membuat list item yang memiliki urutan atau nomor tertentu, sedangkan unordered list digunakan untuk membuat list item yang tidak memiliki urutan atau nomor tertentu. Dalam implementasinya, tag <ol> digunakan untuk ordered list dan tag <ul> digunakan untuk unordered list, sedangkan setiap item dalam list ditandai dengan tag <li>. Dengan memahami penggunaan dan implementasi dari ordered list dan unordered list, kita dapat membuat konten HTML yang lebih terstruktur dan mudah dibaca oleh pengguna.
