Referensi Belajar HTML ul tag. Tutorial dan panduan mengenai element <ul>...</ul> yang digunakan untuk menulis beberapa daftar tersusun secara acak. Mencakup penjelasan yang disertai contoh kode penggunaan sebagai rujukan untuk materi belajar HTML elemen <ul>.


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).

Attributes
Atribut HTML Tag <ul>

Belum ada standar attribute yang dapat digunakan. Attribute yang sudah usang (tidak didukung) oleh HTML5, tidak dibahas disini.


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.

HTML
<ul>
  <li>Apel</li>
  <li>Jeruk</li>
  <li>Melon</li>
</ul>
Contoh 2
HTML
<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:

HTML
<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).

HTML
<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

Contoh source code lengkap disertai dengan link "editor" untuk mencoba (try it) dan melihat hasil (preview) kode.

SOURCE
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Demo HTML ul tag</title>
    <style></style>
  </head>
  <body>
    <h3>Contoh 1</h3>
    <ul>
      <li>Apel</li>
      <li>Jeruk</li>
      <li>Melon</li>
    </ul>

    <hr />
    <h3>Contoh 2</h3>
    <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>

    <hr />
    <h3>Contoh 3</h3>
    <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>

  </body>
</html>



Comments