Cara Membuat Daftar List pada HTML

Dalam menyampaikan informasi yang berbentuk tulisan, pasti diperlukan format penulisan yang tepat agar mudah dipahami oleh pembaca.

Salah satunya yaitu format penulisan list atau daftar.

Penulisan list atau daftar ini biasa dijumpai dalam bentuk list tata cara, list pekerjaan, list daftar nama, list menu masakan, dan lain sebagainya.

Pada halaman website, list juga sering digunakan untuk menampilkan menu navigasi dan daftar kategori.

Lalu bagaimana cara membuat list di halaman website?

Sebelum lanjut ke pembahasan cara membuatnya…

Ada 3 jenis list di HTML yang harus kamu ketahui.

Ordered List adalah list yang berurutan.
Unordered List adalah list yang tak berurutan.
Descriptiona List adalah list yang berisi definisi.

Mari kita bahas secara detail…

Isi Konten

Ordered List

Ordered list merupakan daftar item yang disusun secara berurutan.

List ini ditandai dengan angka atau huruf di depannya untuk menunjukkan urutannya.

Untuk membuatnya, diperlukan tag HTML <ol> dan ikuti dengan tag <li> di dalamnya sebagai item list.

Seperti ini:

<ol>
    <li>item list 1</li>
    <li>item list 2</li>
    <li>item list 3</li>
</ol>

Contoh:

<!DOCTYPE html>
<html>
<head>
    <title>Cara Membuat Ordered List</title>
</head>

<body>
    <h2>Daftar Brand Smartphone</h2>

    <ol>
        <li>Huawai</li>
        <li>iPhone</li>
        <li>Samsung</li>
        <li>Oppo</li>
        <li>Vivo</li>
        <li>Xiaomi</li>
    </ol>
</body>
</html>

Pada contoh di atas, list menggunakan angka sebagai penanda item list.

Lalu bagaimana cara mengubah penanda pada item list menjadi urutan angka romawi seperti I, II, III atau huruf besar seperti A, B, C?

Caranya sangat mudah…

Untuk membuat tampilan list dengan urutan seperti itu, kamu bisa menambahkan atribut type pada tag pembuka <ol> menjadi seperti ini <ol type="I">.

Pilihan nilai atribut type secara lengkap bisa kamu lihat pada tabel berikut ini:

Atribut	Fungsi
type=”a”	Membuat list berurut dengan huruf kecil ( a, b, c, d, …. )
type=”A”	Membuat list berurut dengan huruf besar ( A, B, C, D, ….. )
type=”I”	Membuat list berurut dengan huruf romawi besar ( I, II, III, IV, …. )
type=”i”	Membuat list berurut dengan huruf romawi kecil ( i, ii, iii, iv, ……. )
type=”1″	Membuat list berurut dengan angka ( 1, 2, 3, 4, …… )
compact	Menyatakan bahwa item dalam list pendek sehingga browser menampilkannya dalam bentuk yang lebih padat (atribut ini tidak didukung di banyak browser)
start=”n”	Menentukan nilai awal dari item dalam daftar dimana n = nilai awal

Contoh:

<h3>List dengan type = decimal (nilai default)</h3>

 <ol type="1">
     <li>Huawai</li>
     <li>iPhone</li>
     <li>Samsung</li>
     <li>Oppo</li>
     <li>Vivo</li>
     <li>Xiaomi</li>
 </ol>

 <h3>List dengan type = lower-latin (Alfabet Kecil)</h3>

 <ol type="a">
     <li>Huawai</li>
     <li>iPhone</li>
     <li>Samsung</li>
     <li>Oppo</li>
     <li>Vivo</li>
     <li>Xiaomi</li>
 </ol>

 <h3>List dengan type = upper-latin (Alfabet Kapital)</h3>

 <ol type="A">
     <li>Huawai</li>
     <li>iPhone</li>
     <li>Samsung</li>
     <li>Oppo</li>
     <li>Vivo</li>
     <li>Xiaomi</li>
 </ol>

 <h3>List dengan type = lower-roman (Angka Romawi)</h3>

 <ol type="i">
     <li>Huawai</li>
     <li>iPhone</li>
     <li>Samsung</li>
     <li>Oppo</li>
     <li>Vivo</li>
     <li>Xiaomi</li>
 </ol>

 <h3>List dengan type = upper-roman (Angka Romawi Kapital)</h3>

 <ol type="I">
     <li>Huawai</li>
     <li>iPhone</li>
     <li>Samsung</li>
     <li>Oppo</li>
     <li>Vivo</li>
     <li>Xiaomi</li>
 </ol>

Unordered List

Unordered list merupakan daftar item yang disusun secara tidak berurutan.

Secara default, list ini ditandai dengan disc atau titik bulat di depan setiap item list-nya.

Untuk membuatnya, diperlukan tag HTML <ul> dan ikuti dengan tag <li> di dalamnya sebagai item list.

Seperti ini:

<ul>
    <li>item list 1</li>
    <li>item list 2</li>
    <li>item list 3</li>
</ul>

Contoh:

<!DOCTYPE html>
<html>
<head>
    <title>Cara Membuat Unordered List</title>
</head>

<body>
    <h2>Daftar Brand Smartphone</h2>

    <ul>
        <li>Huawai</li>
        <li>iPhone</li>
        <li>Samsung</li>
        <li>Oppo</li>
        <li>Vivo</li>
        <li>Xiaomi</li>
    </ul>
</body>
</html>

Secara umum, penggunaan unordered list ditandai dengan bulatan hitam, lingkaran, dan kotak pada awal list item.

Pada contoh di atas, unordered list menggunakan disc sebagai penanda item list.

Untuk mengubahnya, kamu bisa menambahkan atribut type pada tag pembuka <ul> menjadi seperti ini <ul type="circle">.

Kamu juga bisa mengganti nilai type sesuai keinginanmu dengan salah satu nilai pada tabel berikut:

Atribut	Fungsi
type=”disc”	Membuat tanda bulatan hitam untuk item (menjadi default jika atribut type tidak ditulis)
type=”circle”	Membuat tanda lingkaran putih untuk item )
type=”square”	Membuat tanda kotak untuk item )

Contoh:

<h3>List dengan type = disc (nilai default)</h3>

 <ul type="disc">
     <li>Huawai</li>
     <li>iPhone</li>
     <li>Samsung</li>
     <li>Oppo</li>
     <li>Vivo</li>
     <li>Xiaomi</li>
 </ul>

 <h3>List dengan type = circle</h3>

 <ul type="circle">
     <li>Huawai</li>
     <li>iPhone</li>
     <li>Samsung</li>
     <li>Oppo</li>
     <li>Vivo</li>
     <li>Xiaomi</li>
 </ul>

 <h3>List dengan type = square</h3>

 <ul type="square">
     <li>Huawai</li>
     <li>iPhone</li>
     <li>Samsung</li>
     <li>Oppo</li>
     <li>Vivo</li>
     <li>Xiaomi</li>
 </ul>

Cara Membuat Description List di HTML
Description list merupakan list yang terdiri dari daftar istilah beserta deskripsi atau penjelasannya. Contohnya seperti kamus.
Untuk membuatnya, diperlukan tag <dl> (data list), dan diikuti dengan tag <dt> (data term) dan (dd) (data description) yang diletakkan didalamnya.
Seperti ini:
```
 <dl>
     <dt>Term...</dt>
     <dd>Description...</dd>
     <dt>Term...</dt>
     <dd>Description...</dd>
 </dl>
```
Contoh:
```
<h4>Glossary</h4>
<dl>
    <dt>Metal</dt>
    <dd>A solid material that is typically hard, shiny, malleable, fusible, and ductile, with good electrical and thermal conductivity.</dd>
    <dd>A genre of rock music that developed in the late 1960s and early 1970s, largely in the United Kingdom and the United States.</dd>
    <dt>Rock</dt>
    <dd>The solid mineral material forming part of the surface of the earth and other similar planets, exposed on the surface or underlying the soil or oceans.</dd>
    <dd>A genre of popular music that originated as "rock and roll" in the United States in the 1950s, and developed into a range of different styles in the 1960s and later, particularly in the United Kingdom and the United States.</dd>
</dl>
```
Preview
Glossary
Metal
A solid material that is typically hard, shiny, malleable, fusible, and ductile, with good electrical and thermal conductivity.
A genre of rock music that developed in the late 1960s and early 1970s, largely in the United Kingdom and the United States.
Rock
The solid mineral material forming part of the surface of the earth and other similar planets, exposed on the surface or underlying the soil or oceans.
A genre of popular music that originated as "rock and roll" in the United States in the 1950s, and developed into a range of different styles in the 1960s and later, particularly in the United Kingdom and the United States.

Baca juga penjelasan lengkap tentang referensi tag dl, dt, dan dd.

Membuat List di dalam List (Nested List)

List juga bisa dibuat di dalam list lain, misalnya untuk menggabungkan ordered list dengan unordered list.

Nested List ini juga sering digunakan untuk membuat menu dropdown pada halaman website, seperti yang bisa kamu lihat di halaman website ini.

Cara membuatnya juga mudah…

Cukup memasukkan tag <ul> atau <ol> di dalam tag <li> pada elemen induk.

Tapi harus teliti agar tidak salah menempatkan diantara tag pembuka dan tag penutup <li>.

Seperti ini:

<ol>
    <li>item list ol</li>
    <li>
        <ul>
            <li>item list ul 1</li>
            <li>item list ul 2</li>
        </ul>
    </li>
</ol>

Contoh:

<!DOCTYPE html>
<html>
<head>
    <title>Cara Membuat Nested List</title>
</head>

<body>
    <h2>Daftar Brand Smartphone</h2>

    <ol>
        <li>Huawai
            <ul>
                <li>Huawai P Smart Pro</li>
                <li>Huawai Nova 6 5G</li>
                <li>Huawai Mate 30 5G</li>
                <li>Huawai Enjoy 10</li>
            </ul>
        </li>
        <li>iPhone
            <ul>
                <li>iPhone 8</li>
                <li>iPhone X</li>
                <li>iPhone 11</li>
                <li>iPhone 11 Pro</li>
            </ul>
        </li>
        <li>Samsung
            <ul>
                <li>Galaxy Fold</li>
                <li>Galaxy Note</li>
                <li>Galaxy S</li>
                <li>Galaxy A</li>
            </ul>
        </li>
    </ol>
</body>
</html>

Ordered List

Unordered List

Cara Membuat Description List di HTML

Membuat List di dalam List (Nested List)