Belajar Koding html Bagian 8: Membuat Daftar (List)

HTML Daftar List adalah elemen HTML yang digunakan untuk menyusun informasi atau data dalam bentuk yang terstruktur dan mudah dibaca.

Ada beberapa jenis daftar list dalam HTML, yaitu: Daftar berurutan (ordered list), Daftar tak berurutan (unordered list), Daftar deskripsi (description list).

Untuk membuat daftar (list) dalam HTML, terdapat tiga jenis utama yang dapat digunakan:

1. Ordered List (Daftar Terurut):
• Menggunakan tag <ol> untuk membuat daftar yang terurut, biasanya ditandai dengan angka atau huruf. Setiap item dalam daftar ditulis menggunakan tag <li>.
• Contoh:

<ol>

    <li>Item 1</li>

    <li>Item 2</li>

    <li>Item 3</li>

</ol>

Tampilan Hasil (Output) Menampilkan Ordered List Angka (Daftar Terurut)

• Secara default, daftar ini akan ditampilkan dengan penomoran angka. Namun, Anda dapat mengubahnya menjadi huruf atau angka Romawi dengan menambahkan atribut type pada tag <ol>. Contoh:

<ol type="A">

    <li>Item A</li>

    <li>Item B</li>

    <li>Item C</li>

</ol>

Tampilan Hasil (Output) Menampilkan Ordered List Huruf (Daftar Terurut)

Atribut type dapat diisi dengan nilai:

• 1 untuk angka (default),
• A untuk huruf kapital,
• a untuk huruf kecil,
• I untuk angka Romawi kapital,
• i untuk angka Romawi kecil.

 

2. Unordered List (Daftar Tidak Terurut):
• Menggunakan tag <ul> untuk membuat daftar yang tidak terurut, biasanya ditandai dengan bullet point atau simbol lainnya. Setiap item dalam daftar juga ditulis menggunakan tag <li>.
• Contoh:

<ul>

    <li>Item A</li>

    <li>Item B</li>

    <li>Item C</li>

</ul>

Tampilan Hasil (Output) Menampilkan Unordered List Lingkaran (Daftar Tidak Terurut)

• Secara default, simbol yang digunakan adalah bullet point (•). Untuk mengubah simbol tersebut, Anda dapat menambahkan atribut type pada tag <ul>. Contoh:

<ul type="square">

    <li>Item A</li>

    <li>Item B</li>

    <li>Item C</li>

</ul>

Tampilan Hasil (Output) Menampilkan Unordered List Kotak (Daftar Tidak Terurut)

Atribut type dapat diisi dengan nilai:

• disc untuk bullet point (default),
• circle untuk lingkaran kosong,
• square untuk kotak.

 

3. Description List (Daftar Deskripsi):
• Menggunakan tag <dl> untuk membuat daftar yang berisi pasangan istilah dan deskripsi. Setiap istilah ditulis menggunakan tag <dt>, dan deskripsinya ditulis menggunakan tag <dd>.
• Contoh:

<dl>

    <dt>Istilah 1</dt>

    <dd>Deskripsi untuk istilah 1.</dd>

    <dt>Istilah 2</dt>

    <dd>Deskripsi untuk istilah 2.</dd>

</dl>

Tampilan Hasil (Output) Menampilkan Description List (Daftar Deskripsi)

• Daftar deskripsi ini sering digunakan untuk membuat glosarium atau daftar istilah dengan penjelasannya.

REFERENSI

https://www.w3schools.com

https://www.petanikode.com

Share this post