HTML List

Menyusun Informasi dengan List

Kita sering kali perlu menyajikan data dalam bentuk poin-poin agar lebih mudah dipahami oleh pengguna. HTML menyediakan dua jenis daftar utama untuk kebutuhan ini: List yang tidak mementingkan urutan (bullet points) dan list yang mementingkan urutan (penomoran).

1. Daftar Tak Berurutan (Unordered List)

Elemen <ul> digunakan untuk membuat daftar di mana urutan item tidak menjadi masalah. Secara default, browser akan menampilkan setiap item dengan penkamu titik bulat (bullet).

Setiap item di dalam daftar harus dibungkus dengan tag <li> (List Item).

<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>

2. Daftar Berurutan (Ordered List)

Elemen <ol> digunakan untuk daftar yang memiliki urutan langkah atau prioritas tertentu. Secara default, browser akan memberikan penomoran angka (1, 2, 3, ...).

Sama seperti <ul>, setiap poinnya menggunakan tag <li>.

<ol>
    <li>Buka Editor Kode</li>
    <li>Tulis Struktur Dasar HTML</li>
    <li>Simpan dengan Ekstensi .html</li>
</ol>

Fitur Tambahan pada Ordered List

Salah satu keunggulan <ol> adalah kita bisa mengubah jenis penomorannya menggunakan atribut type.

type="1" : Angka (default)
type="A" : Huruf kapital
type="a" : Huruf kecil
type="I" : Romawi kapital
type="i" : Romawi kecil

Selain itu, kamu bisa menggunakan atribut start untuk memulai penomoran dari angka tertentu, contohnya :

<ol start="50">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

Contoh

Kita bahkan bisa memasukkan daftar di dalam daftar (Nested List).

<!DOCTYPE html>
<html lang="id">
<head>
    <title>Belajar Membuat List</title>
</head>
<body>
    <h3>Kurikulum Belajar Web</h3>
    <ul>
        <li>Frontend Development
            <ol>
                <li>HTML5</li>
                <li>CSS3</li>
                <li>JavaScript</li>
            </ol>
        </li>
        <li>Backend Development
            <ul>
                <li>Node.js</li>
                <li>Python</li>
            </ul>
        </li>
    </ul>
</body>
</html>