Cara Membuat List/Daftar HTML - Tutorial Dasar HTML

Daftar HTML

Daftar /List pada HTML digunakan untuk mengelompokkan potongan informasi yang saling terkait

Memahami Daftar HTML

Daftar HTML digunakan untuk menyajikan daftar informasi dalam bentuk yang baik dan semantik. Ada tiga jenis daftar dalam HTML dan masing-masing memiliki tujuan dan makna spesifik:

• Daftar tidak berurutan/Unordered List - Digunakan untuk mengelompokkan satu set item terkait, tanpa urutan tertentu.
• Daftar Urut/Ordered List - Digunakan untuk mengelompokkan satu set item terkait, dalam urutan tertentu.
• Daftar deskripsi/Definition List - Digunakan untuk menampilkan daftar istilah dan uraiannya.

Daftar Tidak Urut /Unordered List HTML

Daftar yang tidak urut/ Unordered List dibuat menggunakan tag <ul>, dan setiap item daftar dimulai dengan tag  <li> Item daftar dalam daftar tidak urut ditandai dengan dot (lingkaran hitam kecil), secara default.

<ul>
    <li> Pisang </ li>
    <li> Apel   </ li>
    <li> Nanas  </ li>
</ ul>

Daftar Urut/Ordered List HTML

Daftar Urut/Ordered List, dibuat menggunakan tag <ol>  dan setiap item daftar dimulai dengan tag <li> . Daftar yang dipesan berisi informasi di mana pesanan harus ditekankan.

Item daftar dalam daftar urut ditandai dengan angka.

<ol>
    <li> pisang </ li>
    <li> Apel </ li>
    <li> Nanas </ li>
</ol>

Daftar Definisi/Definition List HTML

Daftar definisi/Definition List adalah daftar item, dengan deskripsi pada setiap item.

Daftar definisi dibuat menggunakan tag <dl>. tag <dl> dihubungkan dengan tag <dt> yang mendefinisikan item dalam daftar, dan tag  <dd> yang menggambarkan item dalam daftar:

<dl>
    <dt> Roti </ dt>
    <dd> Makanan panggang yang terbuat dari tepung. </ dd>
    <dt> Kopi </ dt>
    <dd> Minuman yang terbuat dari biji kopi panggang. </ dd>
</ dl>

untuk pemahaman lebih lanjut perhatikan live previw berikut ini.

Code:

<h2>Unordered List </h2> <ul><li> Pisang </ li> <li> Apel </ li> <li> Nanas </ li> </ul> <h2>ordered List </h2><ol><li> Pisang </ li> <li> Apel </ li> <li> Nanas </ li> </ol> <h2>Definition List </h2> <dl><dt> Roti </ dt> <dd> Makanan panggang yang terbuat dari tepung. </ dd> <dt> Kopi </ dt> <dd> Minuman yang terbuat dari biji kopi panggang. </ dd> </dl>

m

Result:

Share this post