7 Jul 2025

Daftar List di HTML

Di bagian sebelumnya kita udah bahas cara menampilkan gambar dengan benar. Sekarang lanjut ke materi berikutnya, yaitu cara menyusun konten secara rapi dengan daftar (list) di HTML.

Daftar sangat berguna buat menyajikan informasi secara ringkas, terstruktur, dan mudah dibaca.

Struktur Dasar HTML untuk Daftar

Seperti biasa, contoh-contoh ini bisa kamu letakkan di tag <body>:

index.html

<!doctype html>
<html>
  <head>
    <title>blog.adydetra.my.id</title>
  </head>
  <body>
    <!-- Contoh daftar taruh di sini -->
  </body>
</html>

Daftar Tidak Berurutan (`<ul>`)

Daftar ini dipakai buat item yang nggak ada urutan khususnya, seperti daftar hobi atau makanan favorit.

<ul>
  <li>Nasi Goreng</li>
  <li>Sate Ayam</li>
  <li>Bakso</li>
</ul>

Secara default, tampilannya pakai bullet point.

Daftar Berurutan (`<ol>`)

Kalau ingin bikin daftar yang urutannya penting, gunakan elemen <ol>. Biasanya untuk langkah-langkah atau ranking tertentu.

<ol>
  <li>Bangun tidur</li>
  <li>Mandi pagi</li>
  <li>Sarapan</li>
  <li>Berangkat kerja</li>
</ol>

Daftar ini akan tampil dengan angka secara otomatis.

Nested List (Daftar Bersarang)

Kamu juga bisa bikin daftar di dalam daftar lain:

<ul>
  <li>Frontend
    <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
    </ul>
  </li>
  <li>Backend
    <ul>
      <li>PHP</li>
      <li>Python</li>
    </ul>
  </li>
</ul>

Daftar Definisi (`<dl>`, `<dt>`, `<dd>`)

Daftar definisi digunakan buat menampilkan istilah dan penjelasannya:

<dl>
  <dt>HTML</dt>
  <dd>Hypertext Markup Language, bahasa dasar web.</dd>

  <dt>CSS</dt>
  <dd>Cascading Style Sheets, untuk styling halaman web.</dd>

  <dt>JS</dt>
  <dd>JavaScript, bahasa pemrograman untuk interaktivitas web.</dd>
</dl>

<dl>: Definisi list
<dt>: Definisi istilah
<dd>: Deskripsi dari istilah

Mengubah Tipe Penomoran pada Daftar Berurutan

HTML juga memungkinkan kamu untuk mengubah tipe penomoran menggunakan atribut type:

<!-- Penomoran huruf besar -->
<ol type="A">
  <li>Langkah pertama</li>
  <li>Langkah kedua</li>
</ol>

<!-- Penomoran angka romawi kecil -->
<ol type="i">
  <li>Poin pertama</li>
  <li>Poin kedua</li>
</ol>

Memulai Penomoran dari Angka Tertentu

Gunakan atribut start buat mulai dari angka tertentu:

<ol start="3">
  <li>Poin ketiga</li>
  <li>Poin keempat</li>
</ol>

Daftar (list) di HTML membantu kamu menyajikan informasi secara rapi dan terstruktur. Gunakan jenis daftar sesuai kebutuhan kontenmu, apakah itu daftar sederhana, langkah-langkah, atau definisi istilah.

Di bagian berikutnya, kita akan belajar tentang Tabel HTML untuk menyusun data dengan lebih baik lagi.