Cara Membuat Daftar/List di HTML

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

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:

Secara otomatis, ordered list akan menampilkan nomor urutannya.

Kita lanjut ke unordered list.

Barangkali Anda tertarik baca:
- Tutorial HTML untuk Pemula: Membuat Link di HTML
- Tutorial HTML untuk Pemula: Memasukkan Gambar di HTML
- Tutorial HTML untuk Pemula: Membuat Tabel di HTML

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: