Belajar HTML - Membuat Daftar Berurutan dan Tidak Berurutan

Halo teman-teman,

Setelah sebelumnya kita belajar cara membuat tabel untuk menampilkan data dalam format baris dan kolom, sekarang kita masuk ke bagian yang lebih ringkas tapi tetap berguna: list atau daftar.

List sangat cocok digunakan saat kamu ingin menampilkan poin-poin penting, daftar tugas, menu navigasi, atau item yang berurutan.

Dua Jenis List di HTML

HTML punya dua jenis daftar utama:

• Unordered List (daftar tak berurutan), pakai tag <ul>

• Ordered List (daftar berurutan), pakai tag <ol>

Masing-masing item di dalam list ditandai dengan tag <li> (list item).

Membuat Unordered List

Unordered list cocok untuk daftar yang tidak punya urutan tertentu, biasanya ditandai dengan bullet.

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

Hasilnya akan tampil sebagai:

• HTML

• CSS

• JavaScript

Membuat Ordered List

Kalau kamu ingin item tampil dengan nomor atau huruf, gunakan <ol>.

<ol>
  <li>Belajar HTML</li>
  <li>Belajar CSS</li>
  <li>Belajar JavaScript</li>
</ol>

Hasilnya:

1. Belajar HTML

2. Belajar CSS

3. Belajar JavaScript

Mengubah Tipe Marker dengan CSS

Kamu bisa mengubah jenis marker dengan CSS lewat properti list-style-type.

Contoh untuk ordered list:

<ol style="list-style-type: upper-roman;">
  <li>Item A</li>
  <li>Item B</li>
</ol>

Hasil:
I. Item A
II. Item B

Untuk unordered list:

<ul style="list-style-type: square;">
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

Bullet default bisa diubah menjadi circle, square, atau bahkan none (tanpa marker).

List Bersarang (Nested List)

Kamu bisa juga membuat list di dalam list:

<ul>
  <li>Bahasa Pemrograman
    <ul>
      <li>HTML</li>
      <li>CSS</li>
    </ul>
  </li>
  <li>Database</li>
</ul>

List bersarang ini berguna untuk menunjukkan struktur hierarki atau sub-kategori.

Sekarang kamu sudah tahu dasar-dasar membuat list di HTML. Coba gunakan saat ingin menampilkan informasi dalam bentuk poin agar lebih terstruktur dan mudah dibaca.

Kalau ada yang masih bingung soal penggunaan list di HTML, langsung aja tulis di komentar ya. Yuk kita diskusi bareng!

Di materi selanjutnya, kita akan belajar tentang elemen block dan inline di HTML—apa bedanya, dan bagaimana pengaruhnya terhadap tampilan di halaman. Sampai ketemu di tutorial berikutnya!

Baca juga