Daftar Tidak Berurutan HTML
Tag HTML <ul>
mendefinisikan daftar yang tidak berurutan (berpoin).
Daftar HTML Tidak Terurut
Daftar tidak berurutan dimulai dengan <ul>
tag. Setiap item daftar dimulai dengan
<li>
tag.
Item daftar akan ditandai dengan peluru (lingkaran hitam kecil) secara default:
Contoh
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Daftar HTML Tidak Terurut - Pilih Penanda Item Daftar
Properti CSS list-style-type
digunakan untuk menentukan gaya penanda item daftar. Itu dapat memiliki salah satu dari nilai berikut:
Value | Description |
---|---|
disc | Sets the list item marker to a bullet (default) |
circle | Sets the list item marker to a circle |
square | Sets the list item marker to a square |
none | The list items will not be marked |
Contoh - Disk
<ul style="list-style-type:disc;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Contoh - Lingkaran
<ul style="list-style-type:circle;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Contoh - Kotak
<ul style="list-style-type:square;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Contoh - Tidak ada
<ul style="list-style-type:none;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Daftar HTML Bersarang
Daftar dapat bersarang (daftar di dalam daftar):
Contoh
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
Catatan: Item daftar ( <li>
) dapat berisi daftar baru, dan elemen HTML lainnya, seperti gambar dan tautan, dll.
Daftar Horizontal dengan CSS
Daftar HTML dapat ditata dengan berbagai cara dengan CSS.
Salah satu cara populer adalah menata daftar secara horizontal, untuk membuat menu navigasi:
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>
<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>
Tip: Anda dapat mempelajari lebih lanjut tentang CSS di Tutorial CSS kami .
Ringkasan Bab
- Gunakan
<ul>
elemen HTML untuk mendefinisikan daftar yang tidak berurutan - Gunakan properti CSS
list-style-type
untuk menentukan penanda item daftar - Gunakan
<li>
elemen HTML untuk mendefinisikan item daftar - Daftar dapat bersarang
- Item daftar dapat berisi elemen HTML lainnya
- Gunakan properti CSS
float:left
untuk menampilkan daftar secara horizontal
Tag Daftar HTML
Tag | Description |
---|---|
<ul> | Defines an unordered list |
<ol> | Defines an ordered list |
<li> | Defines a list item |
<dl> | Defines a description list |
<dt> | Defines a term in a description list |
<dd> | Describes the term in a description list |
Untuk daftar lengkap semua tag HTML yang tersedia, kunjungi Referensi Tag HTML kami .