Cara Membuat Tag list Html

Cara Membuat Daftar/List di HTML

Apa itu Lists dalam HTML?

List merupakan salah satu tag yang dapa digunakan dalam HTML. Tag List sendiir memiliki beberapa jenis, yaitu :

1. Unordered List
2. Ordered List
3. Description List

Struktur Dasar Unordered & Ordered List

<ul>
<li>Kopi</li>
<li>Teh</li>
<li>Susu</li>
</ul>

1. Tag <ul> yaitu untuk membuka (mendefinisikan) suatu list pada html.
2. Tag <li> yaitu untuk mendefinisikan sebuah butir list didalam sebuah list. Setelah sebuah butir list selesai diikuti dengan menutup tag </li>
3. Tag </ul> yaitu untuk menutup suatu list

Tag Unordered dan Ordered list bisa dibuat nested (list didalam list), yaitu dengan cara menambahkan tag <ul> sejajar dengan tag <li> didalam suatu list. Contohnya yaitu:

<ul>
<li>Kopi</li>
<li>Teh
<ul>
<li>Teh Hitam</li>
<li>Teh Hijau</li>
</ul>
</li>
<li>Susu</li>
</ul> 

Perbedaan Antara Unordered dengan Ordered List

Yang membedakan antara Unordered dan Ordered List yaitu pada bagian atribut. Untuk Unordered memakai atribut style. Atribut tersebut bisa diisi dengan value:

1. Bulat (berisi) : list-style-type:disc
2. Lingkaran : list-style-type:circle
3. Kotak : list-style-type:square
4. Kosong : list-style-type:none

Untuk Ordered List sendiri memakai atribut type, yang bisa diisi dengan value :

1. Angka : type=”1″
2. Huruf Kapital: type=”A”
3. Huruf Kecil : type=”a”
4. Romawi Besar : type=”I”
5. Romawi Kecil : type=”i”

Description List

Description List yaitu sebuah tipe list yang dikhususkan untuk mendeskripsikan suatu poin didalam list. Penggunaan Description List hampir sama dengan Unordered/Ordered list, hanya saja menggunakan tag yang berbeda. Berikut ini cara menulis Description List :

<dl>
<dt>Kopi</dt>
<dd>Sebuah Minuman Hangat yang biasa disajikan saat bekerja</dd>
<dt>Susu</dt>
<dd>Sebuah Minuman yang biasa disediakan di pagi hari</dd>
</dl>

1. Tag <dl> mendefinisikan sebuah Description List
2. Tag <dt> mendefinisikan term (nama)
3. Tag <dd> mendefinisikan data (deskripsi)