Membuat List Pada HTML

Membuat daftar dalam HTML membantu Anda menyusun informasi secara terstruktur, baik dalam format terurut (ordered list) maupun tidak terurut (unordered list). Artikel ini menjelaskan cara menggunakan tag ul, ol, dan li untuk membuat list yang rapi dan mudah dibaca. Pelajari cara menggunakan tag-list ini untuk menampilkan item dalam urutan atau tanpa urutan pada halaman web Anda.

HTML & CSS Dasar Febuari 19, 2025 0 132 Tambahkan ke Daftar Bacaan

Membuat List Pada HTML

List (daftar) adalah elemen HTML yang digunakan untuk menyusun item-item secara terstruktur. Ada dua jenis utama list yang dapat Anda buat dalam HTML:

Unordered List (Daftar Tak Terurut): Menampilkan item dengan bullet (titik).
Ordered List (Daftar Terurut): Menampilkan item dengan angka atau urutan lainnya.

Di HTML, Anda dapat membuat list dengan menggunakan tag <ul> untuk daftar tak terurut dan <ol> untuk daftar terurut. Item dalam list didefinisikan menggunakan tag <li>.

1. Unordered List (Daftar Tak Terurut)

Daftar tak terurut digunakan untuk menampilkan item tanpa urutan tertentu. Setiap item dalam daftar akan diberi bullet secara otomatis oleh browser.

Struktur Dasar Unordered List:

<ul>
    <li>Item pertama</li>
    <li>Item kedua</li>
    <li>Item ketiga</li>
</ul>

Contoh penggunaan Unordered List:

<ul>
    <li>Apel</li>
    <li>Jeruk</li>
    <li>Semangka</li>
</ul>

Tabel di atas akan menghasilkan daftar dengan bullet seperti ini:

Apel
Jeruk
Semangka

2. Ordered List (Daftar Terurut)

Daftar terurut digunakan ketika item dalam daftar memiliki urutan tertentu, misalnya angka atau huruf.

Struktur Dasar Ordered List:

<ol>
    <li>Item pertama</li>
    <li>Item kedua</li>
    <li>Item ketiga</li>
</ol>

Contoh penggunaan Ordered List:

<ol>
    <li>Pertama</li>
    <li>Kedua</li>
    <li>Ketiga</li>
</ol>

Tabel di atas akan menghasilkan daftar dengan angka seperti ini:

Pertama
Kedua
Ketiga

3. Nested List (List Bersarang)

Anda juga dapat membuat list bersarang, yaitu daftar di dalam daftar. Ini berguna ketika Anda ingin menyusun subkategori dari item utama.

Struktur Dasar Nested List:

<ul>
    <li>Item pertama
        <ul>
            <li>Subitem pertama</li>
            <li>Subitem kedua</li>
        </ul>
    </li>
    <li>Item kedua</li>
</ul>

Contoh penggunaan Nested List:

<ul>
    <li>Buah
        <ul>
            <li>Apel</li>
            <li>Jeruk</li>
        </ul>
    </li>
    <li>Sayuran
        <ul>
            <li>Tomat</li>
            <li>Wortel</li>
        </ul>
    </li>
</ul>

Tabel di atas akan menghasilkan daftar seperti ini:

Buah
- Apel
- Jeruk
Sayuran
- Tomat
- Wortel

4. List dengan Custom Bullet atau Numbering

Jika Anda ingin mengubah gaya bullet atau numbering pada list, Anda bisa menggunakan CSS.

Contoh mengganti bullet dengan gambar:

<style>
    ul {
        list-style-image: url('path-to-image.png');
    }
</style>
<ul>
    <li>Item pertama</li>
    <li>Item kedua</li>
    <li>Item ketiga</li>
</ul>

Contoh mengganti numbering dengan huruf:

<style>
    ol {
        list-style-type: upper-alpha;
    }
</style>
<ol>
    <li>Pertama</li>
    <li>Kedua</li>
    <li>Ketiga</li>
</ol>

Ini akan menghasilkan daftar terurut dengan huruf besar:

A. Pertama
B. Kedua
C. Ketiga

5. List dengan Deskripsi (Description List)

Selain daftar terurut dan tak terurut, HTML juga menyediakan description list untuk menyusun item dengan deskripsi atau penjelasan.

Struktur Dasar Description List:

<dl>
    <dt>Term 1</dt>
    <dd>Deskripsi untuk term 1</dd>
    <dt>Term 2</dt>
    <dd>Deskripsi untuk term 2</dd>
</dl>

Contoh penggunaan Description List:

<dl>
    <dt>HTML</dt>
    <dd>HyperText Markup Language, bahasa markup untuk membuat halaman web.</dd>
    <dt>CSS</dt>
    <dd>Cascading Style Sheets, digunakan untuk mendesain halaman web.</dd>
</dl>

Tabel di atas akan menghasilkan format seperti ini: