HTML ul tag | belajar <ul> element

HTML Fadlullah Fadul December 3, 2018

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.

Silahkan, lihat referensi mengenai HTML Global Attribute

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.

Silahkan, lihat referensi mengenai HTML Events Attribute

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
editor 
<!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>
SHARE
Previous Article Next Article