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-typedigunakan 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-typeuntuk 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:leftuntuk 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 .