Tanda <ul> HTML

  • Halaman Sebelumnya <u>
  • Halaman Berikutnya <var>

Definisi dan penggunaan

<ul> tag untuk mendefinisikan daftar tak berurutan (dengan tanda bintang).

Gunakan <ul> tag dan <li> tag untuk membuat daftar tak berurutan.

Tips:Gunakan CSS untukAtur gaya daftar.

Tips:Untuk daftar berurutan, gunakan <ol> Tag.

Lihat pula:

Tutorial HTML:Daftar HTML

Panduan Referensi HTML DOM:Objek Ul

Tutorial CSS:Atur gaya daftar

Contoh

Contoh 1

Daftar HTML tak berurutan:

<ul>
  <li>Kopi</li>
  <li>Te</li>
  <li>Lebah</li>
</ul>

Coba Sendiri

Contoh 2

Atur tipe gaya daftar yang berbeda (dengan CSS):

<ul style="list-style-type:circle">
  <li>Kopi</li>
  <li>Te</li>
  <li>Lebah</li>
</ul>
<ul style="list-style-type:disc">
  <li>Kopi</li>
  <li>Te</li>
  <li>Lebah</li>
</ul>
<ul style="list-style-type:square">
  <li>Kopi</li>
  <li>Te</li>
  <li>Lebah</li>
</ul>

Coba Sendiri

Contoh 3

Perbesar dan perkecil tinggi baris di dalam daftar (dengan CSS):

<ul style="line-height:180%">
  <li>Kopi</li>
  <li>Te</li>
  <li>Lebah</li>
</ul>
<ul style="line-height:80%">
  <li>Kopi</li>
  <li>Te</li>
  <li>Lebah</li>
</ul>

Coba Sendiri

Contoh 4

Buat daftar lain di dalam daftar (daftar yang berjajaran):

<ul>
  <li>Kopi</li>
  <li>Té</li>
    <ul>
      <li>Pu'er</li>
      <li>Te</li>
    </ul>
  </li>
  <li>Lebah</li>
</ul>

Coba Sendiri

Contoh 5

Buat daftar yang kompleks dengan penjajaran:

<ul>
  <li>Kopi</li>
  <li>Té</li>
    <ul>
      <li>Pu'er</li>
      <li>Green Tea</li>
        <ul>
          <li>Biluochun</li>
          <li>Longjing</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>Lebah</li>
</ul>

Coba Sendiri

Atribut Global

<ul> Tanda juga mendukung Atribut Global di HTML.

Atribut Acara

<ul> Tanda juga mendukung Atribut Acara di HTML.

Pengaturan CSS Standar

Sebagian besar peramban akan menampilkan nilai standar berikut ini <ul> Elemen:

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

Coba Sendiri

Dukungan Peramban

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Dukungan Dukungan Dukungan Dukungan Dukungan
  • Halaman Sebelumnya <u>
  • Halaman Berikutnya <var>