Cara Membuat Daftar atau List Pada HTML
Daftar atau List HTML - Daftar adalah catatan nama atau hal (kata-kata, nama orang, barang, dsb) yang disusun berderet dari atas ke bawah.
Pada halaman website, daftar sering dijumpai untuk menampilkan informasi-informasi tertentu.
Daftar pada HTML terdapat beberapa jenis, berikut penjelasanya.
Ordered List / Daftar Berurutan
Ordered List atau ol adalah daftar yang urutanya berurutan, ditandai dengan simbol seperti angka, abjad, romawi, dsb.
Daftar ini bisa dibuat dengan menggunakan tag ol sebagai wadahnya, kemudian isi daftarnya menggunakan tag li.
Contoh
<ol>
<li>PHP</li>
<li>Javascript</li>
<li>Java</li>
<li>Python</li>
</ol>
Hasilnya
Mengganti Simbol
Untuk mengganti simbol pada daftarnya, kita bisa menggunakan atribut type, dengan value/isi nama simbolnya.
Berikut daftar simbol yang bisa digunakan.
- a, daftar dengan simbol abjad huruf kecil berurutan dari a-z.
- A, daftar dengan simbol abjad huruf kapital berurutan dari A-Z.
- 1, daftar degnan simbol angka dari 1, 2, 3, dst.
- i, daftar degnan simbol angka romawi kecil.
- I, daftar degnan simbol angka romawi besar.
Contoh
<ol type="I">
<li>PHP</li>
<li>Javascript</li>
<li>Java</li>
<li>Python</li>
</ol>
Hasilnya
Mengatur Titik Awal Daftar
Kita juga bisa mengatur titik awal/nomer awal daftar, dengan menggunakan atribut start, yang diisi dengan nomer awal/titik awal.
Contoh
<ol type="I" start="4">
<li>PHP</li>
<li>Javascript</li>
<li>Java</li>
<li>Python</li>
</ol>
Hasilnya
Membalikan Urutan Daftar
Selain mengatur titik awal, kita juga dapat membalikan urutan daftarnya dengan atribute reversed.
Contoh
<ol type="I" reversed>
<li>PHP</li>
<li>Javascript</li>
<li>Java</li>
<li>Python</li>
</ol>
Hasilnya
Unordered List / Daftar Tidak Berurutan
Selanjutnya ada unordered list atau ul yang memiliki fungsi membuat daftar dengan urutan yang tidak berurutan.
Daftar ini ditandai dengan simbol seperti kotak, lingkaran, lingkaran hitam, dsb.
Daftar ini dibuat dengan tag ul sebagai wadahnya, yang diisi dengan daftarnya menggunakan tag li.
Contoh
<ul>
<li>PHP</li>
<li>Javascript</li>
<li>Java</li>
<li>Python</li>
</ul>
Hasilnya
Mengganti Simbol
Untuk mengganti simbol pada daftar, gunakan atribute type dan diisi dengan jenis simbolnya.
Berikut daftar simbolnya.
- disc, daftar dengan simbol lingkaran hitam
- circle, daftar dengan simbol lingkaran
- square, daftar dengan simbol lingkaran kotak
- none, daftar tanpa simbol
Contoh
<ul type="square">
<li>PHP</li>
<li>Javascript</li>
<li>Java</li>
<li>Python</li>
</ul>
Hasilnya
Description List
Daftar ini digunakan untuk membuat daftar yang memiliki struktur berupa judul dan penjelasan/deskripsi didalamnya.
Untuk membuatnya terdapat tiga tag yang digunakan, yaitu dl (description list) sebagai wadah dari daftarnya, dt (description title) sebagai judulnya, dan dd (description detail) sebagai penjelasan/deskripsi dari daftar tersebut.
Contoh
<dl>
<dt>HTML</dt>
<dd>Hypertext Markup Language</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheet</dd>
<dt>PHP</dt>
<dd>PHP : Hypertext Preprocessor</dd>
</dl>
Hasilnya
