Dokumentasi HTML interaktif: List

Q: Bagaimana cara membuat bullet point di HTML?

Pakai unordered list: dengan satu untuk setiap poin, misalnya Milk Eggs . Browser menggambar bullet di depan setiap item dan memberi indentasi pada list.

Q: Bagaimana cara menghapus bullet dari list di HTML?

Atur list-style: none pada di CSS. Atur juga padding-inline-start: 0 (atau padding: 0) untuk menghapus indentasi yang ditambahkan browser untuk bullet.

Q: Bagaimana cara memulai ordered list dari nomor lain?

Pakai atribut start: memberi item pertama nomor 5. reversed menghitung mundur, dan value pada sebuah mengatur nomor item itu dan item sesudahnya.

Q: Bagaimana cara membuat nested list di HTML?

Letakkan atau bagian dalam di dalam sebuah milik list luar, sesudah teks item itu. List yang diletakkan langsung di dalam lain, di antara elemen , tidak valid.

List HTML: Bullet Point, Ordered List dan Nested List

Cara membuat list di HTML: bullet point dengan <ul>, list bernomor dengan <ol> (start, reversed, huruf dan angka Romawi), nested list, description list, serta cara mengatur atau menghapus bullet dengan CSS.

Halaman ini dilengkapi editor yang bisa dijalankan. Edit, jalankan, dan lihat output-nya seketika.

Oleh Kevin Spektor, Co-founder & CTO

Diterbitkan Sep 24, 2026

List HTML: ul, ol dan li

HTML punya dua list utama. <ul> (unordered list) menampilkan bullet point, dan <ol> (ordered list) menampilkan nomor. Setiap item adalah sebuah <li> (list item).

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Lists</title>
</head>
<body>
  <h3>Shopping</h3>
  <ul>
    <li>Milk</li>
    <li>Eggs</li>
    <li>Bread</li>
  </ul>

  <h3>Recipe</h3>
  <ol>
    <li>Whisk the eggs</li>
    <li>Heat the pan</li>
    <li>Cook for two minutes</li>
  </ol>
</body>
</html>

Pakai <ol> kalau urutannya punya arti (langkah, peringkat, daftar isi) dan <ul> kalau tidak. Screen reader mengumumkan keduanya sebagai list beserta jumlah itemnya, seperti "list, 3 items". Karena itu list sungguhan lebih baik daripada baris yang diawali "•" atau "1." yang diketik sendiri.

Sebuah list hanya boleh berisi elemen <li> secara langsung. Yang lain, termasuk heading, paragraf dan list lain, diletakkan di dalam sebuah <li>.

Gaya bullet point

list-style-type pada <ul> mengubah bentuk bullet. Pseudo-element ::marker mengatur gaya bullet atau nomornya sendiri, terpisah dari teksnya:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Bullet styles</title>
  <style>
    .disc { list-style-type: disc; }
    .circle { list-style-type: circle; }
    .square { list-style-type: square; }
    .custom { list-style-type: "\2713  "; }
    .colored li::marker { color: #2563eb; font-size: 1.3em; }
  </style>
</head>
<body>
  <ul class="disc"><li>disc (the default)</li></ul>
  <ul class="circle"><li>circle</li></ul>
  <ul class="square"><li>square</li></ul>
  <ul class="custom"><li>any text as the bullet</li></ul>
  <ul class="colored"><li>blue, larger marker</li><li>text stays the same</li></ul>
</body>
</html>

Nilai berupa string memakai teks itu sebagai bullet. "\2713 " adalah tanda centang diikuti satu spasi: spasi pertama hanya mengakhiri escape \2713. ::marker hanya menerima beberapa property, terutama color, font-size dan property font lainnya. Itu sudah cukup untuk permintaan umum "bullet berwarna" tanpa markup tambahan.

Ordered list: angka, huruf dan angka Romawi

<ol> punya beberapa atribut untuk penomorannya:

Atribut	Contoh	Hasil
`type`	`type="a"`	a, b, c (`A`, `i`, `I` dan `1` juga bisa)
`start`	`start="5"`	Mulai menghitung dari 5
`reversed`	`reversed`	Menghitung mundur
`value` (pada `<li>`)	`<li value="10">`	Item ini bernomor 10, item berikutnya melanjutkan dari situ

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Ordered lists</title>
  <style>
    body { display: flex; flex-wrap: wrap; gap: 24px; font-family: system-ui, sans-serif; }
  </style>
</head>
<body>
  <ol type="A">
    <li>Option A</li>
    <li>Option B</li>
  </ol>

  <ol type="i">
    <li>Preface</li>
    <li>Contents</li>
  </ol>

  <ol start="4">
    <li>Fourth step</li>
    <li>Fifth step</li>
  </ol>

  <ol reversed>
    <li>Bronze</li>
    <li>Silver</li>
    <li>Gold</li>
  </ol>
</body>
</html>

type tetap wajar dipakai di HTML karena hurufnya bisa punya arti ("pilih opsi B"). Untuk perubahan yang murni tampilan, CSS list-style-type: upper-alpha atau lower-roman melakukan hal yang sama.

Nested list

Sub-list diletakkan di dalam <li> tempatnya berada, sesudah teks item itu. Browser mengganti bentuk bullet di setiap tingkat: disc, lalu circle, lalu square.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Nested list</title>
</head>
<body>
  <ul>
    <li>Frontend
      <ul>
        <li>HTML</li>
        <li>CSS
          <ul>
            <li>Flexbox</li>
            <li>Grid</li>
          </ul>
        </li>
      </ul>
    </li>
    <li>Backend</li>
  </ul>
</body>
</html>

Perhatikan letak </li>: item "Frontend" baru ditutup sesudah sub-listnya. Kalau ditutup sebelum <ul>, sub-list itu jadi berada langsung di dalam <ul> luar. Itu tidak valid, walaupun tampilannya hampir sama.

Ordered list bisa disarangkan dengan cara yang sama, dan penomorannya mulai lagi dari 1 di setiap sub-list. Untuk nomor seperti 1.1 dan 1.2, kamu perlu CSS counter.

Description list: dl, dt dan dd

Description list memasangkan istilah dengan deskripsinya: glosarium, rincian sebuah pesanan, pasangan mirip FAQ. <dt> adalah istilahnya dan <dd> deskripsinya:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Description list</title>
  <style>
    dt { font-weight: bold; }
    dd { margin: 0 0 10px; color: #4b5563; }
  </style>
</head>
<body>
  <dl>
    <dt>HTML</dt>
    <dd>The structure and content of a page.</dd>
    <dt>CSS</dt>
    <dd>How the page looks.</dd>
    <dt>JavaScript</dt>
    <dd>What the page does.</dd>
  </dl>
</body>
</html>

Satu istilah boleh punya beberapa <dd>, dan beberapa <dt> boleh berbagi satu <dd>. Secara default browser memberi indentasi pada <dd>; aturan margin di atas menghapusnya. Untuk data dengan beberapa kolom, tabel lebih cocok.

Menu navigasi adalah list berisi link. Hapus bullet dengan list-style: none dan indentasinya dengan padding: 0, lalu susun item dalam satu baris dengan flexbox:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Horizontal list</title>
  <style>
    nav ul {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      gap: 8px;
    }
    nav a {
      display: block;
      padding: 8px 14px;
      border-radius: 6px;
      background: #e5e7eb;
      color: #111827;
      text-decoration: none;
    }
  </style>
</head>
<body>
  <nav>
    <ul>
      <li><a href="#home">Home</a></li>
      <li><a href="#courses">Courses</a></li>
      <li><a href="#pricing">Pricing</a></li>
    </ul>
  </nav>
</body>
</html>

Bagi screen reader, list itu tetap sebuah list ("navigation, list, 3 items"). Ada satu pengecualian: Safari dengan VoiceOver bisa menghilangkan makna list kalau bulletnya dihapus. Kalau jumlah item penting bagi penggunamu, tambahkan role="list" ke <ul>.

Jarak default

Browser memberi list margin atas dan bawah sebesar 1em dan indentasi dengan padding-inline-start: 40px, tempat bullet berada. Padding itu ada di sisi awal, jadi di bahasa yang ditulis dari kanan ke kiri, bullet dan indentasinya otomatis pindah ke sisi lain. Kalau padding dihapus, bullet pindah ke luar kotak list dan bisa terpotong; pertahankan sedikit padding atau pakai list-style-position: inside.

Kesalahan umum

<li> tanpa list induk. Elemen ini harus berada di dalam <ul>, <ol> atau <menu>.
Nested list di luar <li>-nya. Letakkan sub-list di dalam item tempatnya berada.
Teks atau tag lain langsung di dalam <ul>, seperti <ul><p>Note</p><li>...</li></ul>. Pindahkan ke dalam sebuah <li> atau ke luar list.
Mengetik bullet atau nomor sendiri dengan • dan <br>. Screen reader mendengarnya sebagai paragraf, bukan list.
list-style: none tanpa padding: 0, sehingga tersisa indentasi 40 piksel yang misterius.
Memakai <ol> demi tampilan. Kalau urutannya tidak penting, pakai <ul> lalu atur gayanya.

Pertanyaan yang sering diajukan

Bagaimana cara membuat bullet point di HTML?

Pakai unordered list: <ul> dengan satu <li> untuk setiap poin, misalnya <ul><li>Milk</li><li>Eggs</li></ul>. Browser menggambar bullet di depan setiap item dan memberi indentasi pada list.

Apa perbedaan ul dan ol?

<ul> adalah unordered list, ditampilkan dengan bullet, untuk item yang urutannya tidak penting. <ol> adalah ordered list, ditampilkan dengan nomor, untuk langkah dan peringkat yang urutannya penting. Keduanya berisi item <li>.

Bagaimana cara menghapus bullet dari list di HTML?

Atur list-style: none pada <ul> di CSS. Atur juga padding-inline-start: 0 (atau padding: 0) untuk menghapus indentasi yang ditambahkan browser untuk bullet.

Bagaimana cara memulai ordered list dari nomor lain?

Pakai atribut start: <ol start="5"> memberi item pertama nomor 5. reversed menghitung mundur, dan value pada sebuah <li> mengatur nomor item itu dan item sesudahnya.

Bagaimana cara membuat nested list di HTML?

Letakkan <ul> atau <ol> bagian dalam di dalam sebuah <li> milik list luar, sesudah teks item itu. List yang diletakkan langsung di dalam <ul> lain, di antara elemen <li>, tidak valid.

Konsep terkait