> 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>
```

![](https://2862583545-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MfbY1GzaHftdclrckNE%2F-MfwQFbEQk0xjvEWcPV3%2F-MfwRnNPzbW2apMbU201%2FScreen%20Shot%202021-07-31%20at%2019.03.20.png?alt=media\&token=a26e2155-accb-4ac9-82d9-28c2e5bff061)

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>
```

![](https://2862583545-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MfbY1GzaHftdclrckNE%2F-MfwQFbEQk0xjvEWcPV3%2F-MfwTaLQjwQTlkYpnAmo%2FScreen%20Shot%202021-07-31%20at%2019.11.10.png?alt=media\&token=a74cf26a-4e72-410a-be93-0c9edf66ef28)

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>
```

![](https://2862583545-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MfbY1GzaHftdclrckNE%2F-MfwQFbEQk0xjvEWcPV3%2F-MfwUWR-Qu4BlDVezwhy%2FScreen%20Shot%202021-07-31%20at%2019.15.21.png?alt=media\&token=80c03cac-8e40-4f81-8200-afdbb7411e5e)

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>
```

![](https://2862583545-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MfbY1GzaHftdclrckNE%2F-MfwWowqDbtRfrYTRk7u%2F-MfwZ78tqx67kP-RVbZX%2FScreen%20Shot%202021-07-31%20at%2019.35.09.png?alt=media\&token=66c052e8-175f-45cb-9ac2-98ab1dc664d2)

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