Tag <ul> HTML mendefinisikan unordered list. Unordered list merupakan list/daftar yang tidak berurut yang menggunakan simbil-simbol pada itemnya.
Section Artikel
Unordered List
Unordered list dibuat menggunakan tag <ul> dan itemnya menggunakan tag <li>
Item unordered list akan ditandai dengan peluru (lingkaran hitam kecil) secara default:
Contoh:
<!DOCTYPE html> <html> <body> <h2>An unordered HTML list</h2> <ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul> </body> </html>
Unordered List – Atribut Item
Properti CSS list-style-type digunakan untuk menentukan style penanda item daftar(list). Berikut style yang bisa digunakan pada unordered list :
| Value | Description |
|---|---|
| disc | Berbentuk lingkaran hitam kecil(default) |
| circle | Berbentuk lingkaran |
| square | Berbentuk kotak |
| none | Tidak menggunakan simbol |
Contoh 1- Disc(default)
<!DOCTYPE html> <html> <body> <h2>Unordered List with Disc Bullets</h2> <ul style="list-style-type:disc;"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul> </body> </html>
Contoh 2 – Circle(Lingkaran)
<!DOCTYPE html> <html> <body> <h2>Unordered List with Circle Bullets</h2> <ul style="list-style-type:circle;"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul> </body> </html>
Contoh 3 – Square(Kotak)
<!DOCTYPE html> <html> <body> <h2>Unordered List with Square Bullets</h2> <ul style="list-style-type:square;"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul> </body> </html>
Contoh 4 – None(Tidak Pakai Simbol)
<!DOCTYPE html> <html> <body> <h2>Unordered List without Bullets</h2> <ul style="list-style-type:none;"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul> </body> </html>
List HTML Bersarang
List dalam HTML bisa disarangkan (daftar di dalam daftar), lihatlah contoh di bawah ini :
Contoh :
<!DOCTYPE html>
<html>
<body>
<h2>A Nested List</h2>
<p>Lists can be nested (list inside list):</p>
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
</body>
</html>
Catatan: Item list (<li>) dapat berisi list baru, dan elemen HTML lainnya, seperti gambar dan tautan, dll.
List Horizontal dengan CSS
List HTML bisa menggunakan CSS agar terlihat lebih menarik. Salah satunya yang biasa digunakan adalah style list secara horizontal untuk membuat menu navigasi. Seperti conoth di bawah ini :
Contoh :
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}
li a:hover {
background-color: #111111;
}
</style>
</head>
<body>
<h2>Navigation Menu</h2>
<p>In this example, we use CSS to style the list horizontally, to create a navigation menu:</p>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>
Rangkuman
- Gunakan elemen HTML <ul> untuk membuat unordered list
- Gunakan properti CSS list-style-type untuk menggunakan beberapa penanda item
- Gunakan elelem HTML <li> untuk mendefinisikan list item
- List dapat di sarangkan(daftar di dalam daftar)
- List item dapat di gabungkan dengan elemen HTML lain
- Gunakan propreti CSS float:left untuk membuat list secara horizontal
