List adalah sebuah record dari pecahan kecil informasi, seperti nama seseorang, biasanya ditulis atau dicetak dengan tanda khusus pada setiap barisnya dan disusun dengan suatu cara tertentu sehingga muda untuk menemukan informasi spesifik yang terkandung dalam urutannya. Contohnya:
- List daftar belanja.
- List aktifitas sehari-hari.
List pada HTML
HTML memberikan tiga cara untuk menampilkan informasi dalam bentuk list. Semua list tersebut harus mengandung satu atau lebih dari daftar list elemen.
Tipe dari list yang dapat digunakan pada HTML adalah:
- ul: Unordered list. List ini akan menggunakan bentuk plain bullet sebagai penanda list.
- ol: Ordered list. List ini akan menggunakan bentuk skema berbeda dari angka terhadap item list.
- dl: Definition list. List ini akan mengarahkan item informasi sama seperti pengarahan pada sistem kamus.
Unordered List pada HTML
Anordered list dimulai dengan tag "ul". Setiap item listdimulai dengan tag "li" (list). Item list akan ditandai dengan bullet (titik khusus) seperti lingkaran hitam kecil secara otomatis.
<!DOCTYPE html>
<html>
<body>
<h2>
Grocery list
</h2>
<ul>
<li>Bread</li>
<li>Eggs</li>
<li>Milk</li>
<li>Coffee</li>
</ul>
</body>
</html>
Item unordered list memiliki berbagai variasi HTML:
satu, Disc: Sekumpulan item list marker untuk tipe bullet default.
<!DOCTYPE html>
<html>
<body>
<h2>
Unordered List with Disc Bullets
</h2>
<h2>
Grocery List
</h2>
<ul style="list-style-type:disc">
<li>Bread</li>
<li>Eggs</li>
<li>Milk</li>
<li>Coffee</li>
</ul>
</body>
</html>
dua, Circle (lingkaran): Sekumpulan item list marker berbentuk tipe lingkaran.
<!DOCTYPE html>
<html>
<body>
<h2>
Unordered List with Circle Bullets
</h2>
<h2>
Grocery list
</h2>
<ul style="list-style-type:circle">
<li>Bread</li>
<li>Eggs</li>
<li>Milk</li>
<li>Coffee</li>
</ul>
</body>
</html>
tiga, Square (persegi): Sekumpulan item list marker berbentuk kotak.
<!DOCTYPE html>
<html>
<body>
<h2>
Unordered List with Square Bullets
</h2>
<h2>
Grocery list
</h2>
<ul style="list-style-type:square">
<li>Bread</li>
<li>Eggs</li>
<li>Milk</li>
<li>Coffee</li>
</ul>
</body>
</html>
Ordered List pada HTML
Ordered list dimulai dengan tag "ol". Setiap list item dimulai dengan tag "li". Item list ditandai dengan angka dengan urutan yang otomatis.
<!DOCTYPE html>
<html>
<body>
<h2>
Grocery List
</h2>
<ol>
<li>Bread</li>
<li>Eggs</li>
<li>Milk</li>
<li>Coffee</li>
</ol>
</body>
</html>
Ordered list HTML memiliki berbagai variasi list item marker:
Tipe atribut dari tag <ol>, mendefinisikan tipe dari list item marker.
satu, tipe="1", item list akan ditandai dengan urutan angka secara otomatis.
<!DOCTYPE html>
<html>
<body>
<h2>
Ordered List with Numbers
</h2>
<ol type="1">
<li>Bread</li>
<li>Eggs</li>
<li>Milk</li>
<li>Coffee</li>
</ol>
</body>
</html>
dua, type="A", item list akan ditandai dengan urutan huruf uppercase.
<!DOCTYPE html>
<html>
<body>
<h2>
Ordered List with Letters
</h2>
<ol type="A">
<li>Bread</li>
<li>Eggs</li>
<li>Milk</li>
<li>Coffee</li>
</ol>
</body>
</html>
tiga, type="a", item list akan ditandai dengan urutan huruf lowercase.
<!DOCTYPE html>
<html>
<body>
<h2>
Ordered List with Lowercase Letters
</h2>
<ol type="a">
<li>Bread</li>
<li>Eggs</li>
<li>Milk</li>
<li>Coffee</li>
</ol>
</body>
</html>
empat, type="I", item list akan ditandai dengan urutan penomoran romawi uppercase.
<!DOCTYPE html>
<html>
<body>
<h2>
Ordered List with Roman Numbers
</h2>
<ol type="I">
<li>Bread</li>
<li>Eggs</li>
<li>Milk</li>
<li>Coffee</li>
</ol>
</body>
</html>
lima, type="i", item list akan ditandai dengan urutan penomoran romawi lowercase.
<!DOCTYPE html>
<html>
<body>
<h2>
Ordered List with Lowercase Roman Numbers
</h2>
<ol type="i">
<li>Bread</li>
<li>Eggs</li>
<li>Milk</li>
<li>Coffee</li>
</ol>
</body>
</html>
Description List pada HTML
Description list adalah sebuah list dari istilah tertentu, yang disertai dengan deskripsi pada setiap istilah tersebut. Tag <dl> digunakan untuk mendefinisikan description list, yang digunakan untuk mendefinisikan nama istilah, dan tag <dd> digunakan untuk mendeskripsikan setiap istilah pada list.
<!DOCTYPE html>
<html>
<body>
<h2>
A Description List
</h2>
<dl>
<dt>Coffee</dt>
<dd>- 500 gms</dd>
<dt>Milk</dt>
<dd>- 1 ltr Tetra Pack</dd>
</dl>
</body>
</html>
Coffee- 500 gmsMilk- 1 ltr Tetra Pack
List bersarang pada HTML:
List bersarang adalah sekumpulan list yang terdapat di dalam sebuah list.
<!DOCTYPE html>
<html>
<body>
<h2>
A Nested List
</h2>
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
</body>
</html>
- Coffee
- Tea
- Milk