Background Image

Postingan

Membuat Daftar di HTML: Ordered List dan Unordered List

Dalam HTML, ada dua jenis daftar utama untuk menyusun informasi agar mudah dibaca dan dipahami: Ordered List yang itemnya berurutan dan diberi nomor, serta Unordered List yang itemnya tidak berurutan.

Gambar Membuat Daftar di HTML: Ordered List dan Unordered List
22 Juli 2025 12:38 Dinda Sintia HTML

Membuat Daftar di HTML: Ordered List dan Unordered List

Dalam HTML, daftar adalah cara yang efektif untuk menyusun informasi agar mudah dibaca dan dipahami. Ada dua jenis daftar utama yang sering digunakan: Ordered List (daftar terurut) dan Unordered List (daftar tidak terurut). Keduanya memiliki fungsi dan tampilan yang berbeda, sesuai dengan kebutuhan presentasi informasi Anda.

1. Ordered List (<ol>)

Ordered List digunakan untuk membuat daftar di mana urutan item sangat penting. Setiap item dalam daftar ini akan secara otomatis diberi nomor (1, 2, 3, dst.) secara default. Ini cocok untuk instruksi langkah demi langkah, ranking, atau urutan kronologis.

Struktur Dasar:

Tag <ol> digunakan untuk membungkus seluruh daftar, dan setiap item dalam daftar dibungkus dengan tag <li> (list item).

<ol>

  <li>Item pertama</li>

  <li>Item kedua</li>

  <li>Item ketiga</li>

</ol>

Contoh Penggunaan:

Berikut adalah contoh resep sederhana menggunakan ordered list:

<h3>Cara Membuat Kopi Susu</h3>

<ol>

  <li>Seduh kopi hitam favorit Anda.</li>

  <li>Tambahkan gula secukupnya (opsional).</li>

  <li>Tuangkan susu cair hangat atau dingin sesuai selera.</li>

  <li>Aduk rata dan nikmati!</li>

</ol>

Hasil Tampilan :

Cara Membuat Kopi Susu

  1. Seduh kopi hitam favorit Anda.
  2. Tambahkan gula secukupnya (opsional).
  3. Tuangkan susu cair hangat atau dingin sesuai selera.
  4. Aduk rata dan nikmati!

Variasi Angka:

Anda bisa mengubah jenis penomoran dengan atribut type pada tag <ol>:

  • type="1": Angka (default)
  • type="A": Huruf kapital (A, B, C)
  • type="a": Huruf kecil (a, b, c)
  • type="I": Angka Romawi kapital (I, II, III)
  • type="i": Angka Romawi kecil (i, ii, iii)

Contoh dengan type="A":

<ol type="A">

  <li>Langkah A</li>

  <li>Langkah B</li>

  <li>Langkah C</li>

</ol>

Hasil Tampilan :

A. Langkah A
B. Langkah B 
C. Langkah C 

2. Unordered List (<ul>)

Unordered List digunakan untuk membuat daftar di mana urutan item tidak terlalu penting. Setiap item dalam daftar ini akan secara otomatis diberi tanda bullet (titik) secara default. Ini ideal untuk daftar fitur, daftar bahan, atau poin-poin umum.

Struktur Dasar:

Sama seperti ordered list, tag <ul> digunakan untuk membungkus seluruh daftar, dan setiap item dalam daftar dibungkus dengan tag <li>.

<ul>

  <li>Item pertama</li>

  <li>Item kedua</li>

  <li>Item ketiga</li>

</ul>

Contoh Penggunaan:

Berikut adalah contoh daftar belanja menggunakan unordered list:

<h3>Daftar Belanja Mingguan</h3>

<ul>

  <li>Beras</li>

  <li>Minyak goreng</li>

  <li>Telur</li>

  <li>Sayuran hijau</li>

</ul>

Hasil Tampilan :

Daftar Belanja Mingguan

  • Beras
  • Minyak goreng
  • Telur
  • Sayuran hijau

Variasi Tanda Bullet:

Anda bisa mengubah jenis tanda bullet dengan properti CSS list-style-type pada tag <ul> (meskipun ini lebih ke styling daripada HTML murni):

  • disc (default): Lingkaran solid
  • circle: Lingkaran kosong
  • square: Kotak solid
  • none: Tanpa tanda bullet (sering digunakan untuk navigasi)

Contoh dengan style="list-style-type: square;":

<ul style="list-style-type: square;">

  <li>Manfaat A</li>

  <li>Manfaat B</li>

  <li>Manfaat C</li>

</ul>

Hasil Tampilan:

  • Manfaat A
  • Manfaat B
  • Manfaat C

Dengan memahami perbedaan dan penggunaan <ul> serta <ol>, Anda dapat menyajikan informasi dalam situs web Anda dengan lebih terstruktur, rapi, dan mudah dinavigasi oleh pengunjung. Memilih jenis daftar yang tepat akan sangat membantu dalam menyampaikan maksud dan tujuan konten Anda.

# HTML # Tutorial

Postingan Terkait