Deskripsi
Penjelasan HTML ul

<ul> menunjukkan sebuah Unordered List atau Daftar Acak. HTML <ul> element digunakan untuk merepresentasikan sebuah daftar item atau koleksi beberapa item yang dapat disusun kembali secara acak tanpa penomoran. Artinya, apabila item-item tersebut diubah urutannya, tidak akan berpengaruh pada dokumen (lihat Contoh 2 dibawah).

Untuk menulis sebuah item dalam daftar (list), digunakan element <li> yang menunjukkan List Item. Jadi, <li> terletak didalam <ul> dan dapat ditulis lebih dari satu element. <ul> juga bisa saja terletak (ditulis) didalam <li> yang menunjukkan tingkatan daftar (list) bersarang (nested).


Global Attributes
Atribut Secara Global (Keseluruhan)

<ul> tag mencakup global attributes, yang artinya tag tersebut dapat disisipkan semua attributes yang termasuk dalam global attributes yang secara umum berlaku untuk semua HTML tags.

Event Attributes
Atribut event (Peristiwa)

<ul> tag mencakup event attributes, yang artinya attribute tersebut dijalankan ketika ada interaksi dari user atau dalam suatu peristiwa (kejadian). Contoh: menjalankan script (JavaScript) ketika halaman web pada jendela browser hendak ditutup, dan lain sebagainya.

Example
Contoh HTML <ul> element

Contoh 1

Contoh sederhana.

<ul>
  <li>Apel</li>
  <li>Jeruk</li>
  <li>Melon</li>
</ul>
Contoh 2
<p>Budi pernah tinggal di kota-kota berikut:</p>
<ul>
  <li>Aceh</li>
  <li>Bandung</li>
  <li>Jakarta</li>
  <li>Serang</li>
  <li>Tangerang</li>
</ul>

Contoh diatas (<li>) adalah daftar item kota-kota yang disusun (dari atas ke bawah) secara abjad (A sampai Z). Jika urutan kota tersebut diubah seperti ini:

<p>Budi pernah tinggal di kota-kota berikut:</p>
<ul>
  <li>Tangerang</li>
  <li>Jakarta</li>
  <li>Serang</li>
  <li>Bandung</li>
  <li>Aceh</li>
</ul>

Maka, tidak akan mempengaruhi maksud dari konten yang disampaikan. Artinya sama saja, Budi pernah tinggal di 5 kota tersebut diatas.

Contoh 3

Contoh tingkatan daftar (list) bersarang (nested).

<ul>
  <li>Mobil</li>
  <li>Motor
    <ul>
      <li>Yamaha</li>
      <li>Honda
        <ul>
          <li>Beat</li>
          <li>Vario</li>
          <li>Supra X</li>
        </ul>
      </li>
      <li>Suzuki</li>
    </ul>
  </li>
  <li>Sepeda</li>
</ul>

Contoh Lengkap
Demo dengan Source Code Editor

Demo Editor
Demo HTML <ul>
Code Editor