Tag HTML <ul>


Contoh

Daftar HTML yang tidak berurutan:

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

Lebih banyak contoh "Coba Sendiri" di bawah ini.


Definisi dan Penggunaan

Tag <ul>mendefinisikan daftar yang tidak berurutan (berpoin).

Gunakan <ul>tag bersama dengan tag <li> untuk membuat daftar yang tidak berurutan.

Tip: Gunakan CSS untuk menata daftar .

Tip: Untuk daftar terurut, gunakan tag <ol>


Dukungan Peramban

Element
<ul> Yes Yes Yes Yes Yes

Atribut Global

Tag <ul>juga mendukung Atribut Global dalam HTML .


Atribut Acara

Tag <ul>juga mendukung Atribut Peristiwa dalam HTML .



Lebih Banyak Contoh

Contoh

Setel berbagai jenis gaya daftar (dengan CSS):

<ul style="list-style-type:circle">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

<ul style="list-style-type:disc">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

<ul style="list-style-type:square">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

Contoh

Perluas dan kurangi tinggi baris dalam daftar (dengan CSS):

<ul style="line-height:180%">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

<ul style="line-height:80%">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

Contoh

Buat daftar di dalam daftar (daftar bersarang):

<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ul>

Contoh

Buat daftar bersarang yang lebih kompleks:

<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea
        <ul>
          <li>China</li>
          <li>Africa</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>Milk</li>
</ul>

Halaman Terkait

Tutorial HTML: Daftar HTML

Referensi DOM HTML: Objek Ul

Tutorial CSS: Daftar Gaya


Pengaturan CSS Default

Sebagian besar browser akan menampilkan <ul>elemen dengan nilai default berikut:

Contoh

ul {
  display: block;
  list-style-type: disc;
  margin-top: 1em;
  margin-bottom: 1 em;
  margin-left: 0;
  margin-right: 0;
  padding-left: 40px;
}