List dalam HTML

Dalam membuat suatu halaman web, adakalanya kita membutuhkan suatu daftar untuk beberapa hal, seperti daftar menu makanan, daftar item-item yang dijual, dll. Untuk keperluan daftar tersebut, kita dapat membuatnya dalam HTML yaitu dengan menggunakan list.

List dalam HTML terbagi menjadi tiga, yaitu Unordered List, Ordered List, dan Description List. Untuk lebih jelasnya, perhatikan contoh dari penerapan list dalam kode HTML berikut:

<!--Unordered List-->
<ul>
    <li>Mangga</li>
    <li>Kacang</li>
    <li>Pisang</li>
</ul>
<!--Ordered List-->
<ol>
    <li>Ice Cream</li>
    <li>Kopi</li>
    <li>Teh</li>
</ol>
<!--Description List-->
<dl>
    <dt>Kopi</dt>
    <dd>Kopi adalah minuman yang wajib ada untuk menemani kejombloan programmer saat menghadapi error yang tak kunjung
        usai. Fix no debat!!</dd>
</dl>

Output Dalam Web Browser:

Unordered List

Unordered list merupakan list yang tidak berurutan. Untuk membuat unordered list, kita dapat menggunakan tag <ul>.

Contoh Penerapan:

<h3>Nama-Nama Binatang:</h3>
<ul>
    <li>Kucing</li>
    <li>Kuda</li>
    <li>Dinosaurus</li>
</ul>

Tag <li> tersebut digunakan untuk mendefinisikan item-item yang berada di dalam list.

Output Dalam Web Browser:

Unordered List Type

Kita juga dapat merubah penanda dari item unordered list dengan menggunakan atribut style dengan properti list-style-type. Adapun tipe-tipe dari penanda item dalam unordered list diantaranya yaitu:

• disc  >> Ini merupakan tipe default dari unordered list. Bentuk dari tipe disc ini adalah lingkaran hitam
• circle  >> Tipe ini berbentuk lingkaran yang berongga
• square  >> Tipe ini berbentuk persegi berwarna hitam
• none  >> Tipe ini akan menghapus penanda dari list di setiap itemnya

Contoh Penerapan:

<h3>List Style Type disc:</h3>
<ul style="list-style-type: disc;">
    <li>Kucing</li>
    <li>Kuda</li>
    <li>Dinosaurus</li>
</ul>
<h3>List Style Type circle:</h3>
<ul style="list-style-type: circle;">
    <li>Kanguru</li>
    <li>Koala</li>
    <li>Domba</li>
</ul>
<h3>List Style Type square:</h3>
<ul style="list-style-type: square;">
    <li>Pegasus</li>
    <li>Unicorn</li>
    <li>Naga</li>
</ul>
<h3>List Style Type none:</h3>
<ul style="list-style-type: none;">
    <li>Mie Ayam</li>
    <li>Soto Daging</li>
    <li>Nasi Goreng</li>
</ul>

Output Dalam Web Browser:

Ordered List

Ordered list merupakan list yang berurutan. Untuk membuat ordered list, kita dapat menggunakan tag <ol>.

Contoh Penerapan:

<h3>Daftar Minuman:</h3>
<ol>
    <li>Kopi</li>
    <li>Teh</li>
    <li>Milkshake</li>
</ol>

Tag <li> tersebut digunakan untuk mendefinisikan item-item yang berada di dalam list.

Output Dalam Web Browser:

Ordered List Type

Penanda item dari ordered list juga dapat kita ubah menggunakan atribut type. Adapun tipe-tipe dari penanda item dalam ordered list diantaranya yaitu:

• 1  >> Ini merupakan tipe default dari ordered list. Bentuk dari tipe 1 ini adalah urutan angka desimal 1, 2, 3, dst.
• A  >> Tipe ini merupakan urutan alfabet kapital A, B, C, dst.
• a  >> Tipe ini merupakan urutan alfabet kecil a, b, c, dst.
• I  >> Tipe ini merupakan urutan angka romawi kapital I, II, III, dst.
• i  >> Tipe ini merupakan urutan angka romawi kecil i, ii, iii, dst.

Contoh Penerapan:

<h3>Ordered List Type 1:</h3>
<ol type="1">
    <li>Kucing</li>
    <li>Kuda</li>
    <li>Dinosaurus</li>
</ol>
<h3>Ordered List Type A:</h3>
<ol type="A">
    <li>Kanguru</li>
    <li>Koala</li>
    <li>Domba</li>
</ol>
<h3>Ordered List Type a:</h3>
<ol type="a">
    <li>Pegasus</li>
    <li>Unicorn</li>
    <li>Naga</li>
</ol>
<h3>Ordered List Type I:</h3>
<ol type="I">
    <li>Kopi</li>
    <li>Teh</li>
    <li>Milkshake</li>
</ol>
<h3>Ordered List Type i:</h3>
<ol type="i">
    <li>Mie Ayam</li>
    <li>Soto Daging</li>
    <li>Nasi Goreng</li>
</ol>

Output Dalam Web Browser:

Ordered List Start Attribute

Kita juga dapat mengubah nilai awal dari penanda list dalam ordered list. Contoh penggunaannya yaitu ketika kita tidak ingin menggunakan ordered list dimulai dari angka 1, melainkan angka 3. Kita dapat menggunakan atribut start untuk menerapkan hal tersebut.

Contoh Penerapan:

<h3>Ordered List Type 1:</h3>
<ol type="1" start="3">
    <li>Kucing</li>
    <li>Kuda</li>
    <li>Dinosaurus</li>
</ol>
<h3>Ordered List Type A:</h3>
<ol type="A" start="2">
    <li>Kanguru</li>
    <li>Koala</li>
    <li>Domba</li>
</ol>
<h3>Ordered List Type a:</h3>
<ol type="a" start="27">
    <li>Pegasus</li>
    <li>Unicorn</li>
    <li>Naga</li>
</ol>
<h3>Ordered List Type I:</h3>
<ol type="I" start="10">
    <li>Kopi</li>
    <li>Teh</li>
    <li>Milkshake</li>
</ol>
<h3>Ordered List Type i:</h3>
<ol type="i" start="7">
    <li>Mie Ayam</li>
    <li>Soto Daging</li>
    <li>Nasi Goreng</li>
</ol>

Nilai dari atribut start hanya dapat diisi dengan angka desimal saja.

Output Dalam Web Browser:

Description List

Description list merupakan list yang digunakan untuk membuat suatu deskripsi. Contoh penerapan dari description list ini yaitu ketika membuat list suatu istilah.

Contoh Penerapan:

<dl>
    <dt>Kopi</dt>
    <dd>Kopi adalah minuman yang wajib ada untuk menemani kejombloan programmer saat menghadapi error yang tak kunjung
        usai.</dd>
    <dt>Boba Choco Cheese</dt>
    <dd>Merupakan minuman yang berisi campuran dari coklat, cheese cream, dan boba yang dijamin bikin nagih!</dd>
</dl>

Penjelasan kode:

• Elemen <dl> digunakan untuk mendefinisikan description list.
• Elemen <dt> digunakan untuk membuat istilah atau nama dalam description list.
• Elemen <dd> digunakan untuk membuat deskripsi atau definisi dari suatu istilah atau nama.

Output Dalam Web Browser:

Practice: Membuat Nested List

Nested list merupakan list yang bersarang (list di dalam list). Dalam implementasinya, nested list dibuat dengan membuat suatu elemen list di dalam elemen list.

Contoh Penerapan:

<h3>Daftar Menu</h3>
<h4>Makanan:</h4>
<ol>
    <li>Mie <ul>
            <li>Mie Goreng</li>
            <li>Mie Rebus</li>
            <li>Mie Ayam</li>
        </ul>
    </li>
</ol>
<h4>Minuman:</h4>
<ol>
    <li>Boba <ul>
            <li>Boba Choco Cheese</li>
            <li>Boba Choco Almond</li>
        </ul>
    </li>
    <li>Kopi <ul>
            <li>Kopi Hitam</li>
            <li>Kopi Susu</li>
            <li>Kopi Gula Aren</li>
        </ul>
    </li>
</ol>

Output Dalam Web Browser: