Beranda / Koding

Cara Membuat Daftar/List di HTML

Oleh AneIqbal
Halo gan. Di postingan sebelumnya kita sudah membahas cara membuat judul/heading di HTML. Kali ini kita akan bahas cara membuat daftar/list di HTML.

Membuat Daftar/List di HTML

Membuat daftar/list di HTML

Di HTML, kita dapat membuat daftar/list. Ada 2 jenis list: berurutan (ordered list) dan tidak berurutan (unordered list).

Ordered list akan menampilkan daftar dengan nomor. Tagnya adalah <ol>.

Unordered list akan menampilkan daftar dengan bulatan. Tagnya adalah <ul>.

Sedangkan listnya sendiri tagnya adalah <li>. Tag <li> dimasukkan di antara tag ordered atau unordered list.

Membuat ordered list

Sebagai contoh, kita akan membuat list warna pelangi. Kode HTMLnya:
<!DOCTYPE html>
<html>
  <head>
    <title>Membuat ordered list</title>
  </head>

  <body>
    <h2>Warna pelangi</h2>

    <ol>
      <li>Merah</li>
      <li>Jingga</li>
      <li>Kuning</li>
      <li>Hijau</li>
      <li>Biru</li>
      <li>Nila</li>
      <li>Ungu</li>
    </ol>
  </body>
</html>

Web browser akan menampilkan seperti berikut:

Membuat Daftar/List di HTML

Secara otomatis, ordered list akan menampilkan nomor urutannya.


Membuat unordered list

Kita pakai contoh yang di atas saja, hanya ganti tag <ol> menjadi tag <ul> agar terlihat jelas perbedaannya.

Berikut kodenya:
<!DOCTYPE html>
<html>
  <head>
    <title>Membuat unordered list</title>
  </head>

  <body>
    <h2>Warna pelangi</h2>

    <ul>
      <li>Merah</li>
      <li>Jingga</li>
      <li>Kuning</li>
      <li>Hijau</li>
      <li>Biru</li>
      <li>Nila</li>
      <li>Ungu</li>
    </ul>
  </body>
</html>

Web browser akan menampilkan:

Membuat Daftar/List di HTML

Unordered list akan menampilkan list dengan bulatan. Terlihat perbedaannya kan?

Kegunaan lain dari list HTML

Selain membuat list, tag list juga bisa digunakan untuk membuat navigasi halaman web, tetapi harus dibantu dengan CSS.

Membuat Daftar/List di HTML

Kita juga bisa menempatkan list di dalam list. Bahasa jawanya itu nested list, list beranak atau list bersarang.

Sampai sini selesai pembahasan kita tentang pembuatan list di HTML.

Selanjutnya yang akan kita bahas yakni cara membuat link di HTML.