> For the complete documentation index, see [llms.txt](https://seri-belajar-pemrograman.rijalasepnugroho.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://seri-belajar-pemrograman.rijalasepnugroho.com/html-dan-css/list.md).

# List

Elemen list digunakan untuk membuat suatu list atau daftar. HTML menyediakan dua jenis list, yaitu *ordered list* (list berurutan) dan *unordered list* (list tidak berurutan). Setelah elemen list dibuat, kita bisa mengisinya dengan *list item* sebanyak yang diinginkan. Tag \<li> digunakan untuk membuat *list item*.

### List Berurutan

Tag \<ol> atau *ordered list* digunakan untuk membuat list yang berurutan.

```markup
<ol>
    <li>Jakarta</li>
    <li>Surabaya</li>
    <li>Denpasar</li>
</ol>
```

![](/files/-MfwRnNPzbW2apMbU201)

Secara default urutan list ditentukan dengan angka. Jika ingin mengubah jenis urutan, kita bisa memanfaatkan aturan-aturan pada css, yaitu : **list-style-type**.

```markup
<style>
    ol {
        list-style-type: lower-latin;
    } 
</style>
<ol>
    <li>Jakarta</li>
    <li>Surabaya</li>
    <li>Denpasar</li>
</ol>
```

![](/files/-MfwTaLQjwQTlkYpnAmo)

Ada banyak tipe list-style, saya akan menuliskan beberapa yang sering digunakan, yaitu : decimal-leading-zero, lower-latin, lower-roman, upper-latin, dan upper-roman.

### List Tidak Berurutan

Tag \<ul> atau *unordered list* digunakan untuk membuat list yang tidak berurutan.

```markup
<ul>
    <li>Jakarta</li>
    <li>Surabaya</li>
    <li>Denpasar</li>
</ul>
```

![](/files/-MfwUWR-Qu4BlDVezwhy)

Secara default urutan list ditentukan dengan ***disc***. Jika ingin mengubah tipe list, kita bisa memanfaatkan aturan-aturan pada css, yaitu : **list-style-type**.

```markup
<style>
    ul {
        list-style-type: circle;
    }
</style>

<ul>
    <li>Jakarta</li>
    <li>Surabaya</li>
    <li>Denpasar</li>
</ul>
```

![](/files/-MfwZ78tqx67kP-RVbZX)

Tipe list-style untuk *unordered list* yang sering digunakan adalah: circle, square, dan none.