Home Formatting Text List HTML

List dalam HTML

22 menit Pemula Struktur Data

Pelajari cara membuat berbagai jenis list HTML untuk menampilkan daftar item secara terstruktur dan terorganisir dengan baik.

Jenis-jenis List di HTML

HTML menyediakan tiga jenis list utama untuk menampilkan informasi dalam format terstruktur. Setiap jenis memiliki tujuan dan penggunaan yang spesifik.

Unordered List (<ul>)

Daftar tidak terurut dengan bullet points. Cocok untuk item yang tidak memiliki urutan prioritas.

Bullet Points

Ordered List (<ol>)

Daftar terurut dengan angka atau huruf. Ideal untuk langkah-langkah atau peringkat.

Numbered

Description List (<dl>)

Daftar dengan istilah dan deskripsi. Sempurna untuk glosarium atau definisi.

Key-Value

Unordered List (<ul>)

📋 Contoh Unordered List

<ul>
    <li>Nasi Goreng Spesial</li>
    <li>Mie Ayam Bakso
        <ul>
            <li>Pedas</li>
            <li>Tidak Pedas</li>
        </ul>
    </li>
    <li>Sate Ayam Madura</li>
    <li>Gado-gado Jakarta</li>
</ul>
unordered-list.html
  • Nasi Goreng Spesial
  • Mie Ayam Bakso
    • Pedas
    • Tidak Pedas
  • Sate Ayam Madura
  • Gado-gado Jakarta

🎨 Gaya Bullet yang Tersedia:

disc Default
circle Lingkaran
square Kotak
none Tidak ada

Ordered List (<ol>)

🔢 Contoh Ordered List dengan Atribut

<ol type="I" start="5">
    <li>Persiapan bahan</li>
    <li>Memasak dengan api sedang</li>
    <li value="10">Tambahkan bumbu rahasia</li>
    <li>Sajikan panas-panas</li>
</ol>

<ol type="A">
    <li>Pilihan A</li>
    <li>Pilihan B</li>
    <li>Pilihan C</li>
</ol>
ordered-list.html
  1. Persiapan bahan
  2. Memasak dengan api sedang
  3. Tambahkan bumbu rahasia
  4. Sajikan panas-panas
  1. Pilihan A
  2. Pilihan B
  3. Pilihan C

📊 Jenis Penomoran Ordered List:

type="1"
1, 2, 3, 4, 5
Angka (default)
type="A"
A, B, C, D, E
Huruf Besar
type="a"
a, b, c, d, e
Huruf Kecil
type="I"
I, II, III, IV, V
Romawi Besar
type="i"
i, ii, iii, iv, v
Romawi Kecil

⚙️ Atribut Ordered List:

Atribut Deskripsi Nilai Contoh
type Jenis penomoran 1, A, a, I, i <ol type="A">
start Nomor awal Angka <ol start="5">
reversed Urutan terbalik Boolean <ol reversed>

Description List (<dl>)

📖 Contoh Description List

<dl>
    <dt>HTML</dt>
    <dd>HyperText Markup Language - bahasa markup untuk membuat halaman web.</dd>
    
    <dt>CSS</dt>
    <dd>Cascading Style Sheets - bahasa stylesheet untuk mendesain tampilan web.</dd>
    
    <dt>JavaScript</dt>
    <dd>Bahasa pemrograman untuk membuat halaman web interaktif.</dd>
</dl>
description-list.html
HTML
HyperText Markup Language - bahasa markup untuk membuat halaman web.
CSS
Cascading Style Sheets - bahasa stylesheet untuk mendesain tampilan web.
JavaScript
Bahasa pemrograman untuk membuat halaman web interaktif.

🧩 Elemen Description List:

<dl>
Description List

Container utama untuk list deskripsi

<dt>
Description Term

Istilah atau kata kunci yang dideskripsikan

<dd>
Description Details

Deskripsi atau penjelasan dari istilah

List Bersarang (Nested List)

List dapat disusun secara hierarkis dengan menyematkan list di dalam list item. Teknik ini sangat berguna untuk membuat menu, outline, atau struktur data yang kompleks.

🌳 Contoh Nested List Kompleks

<ul>
    <li>Frontend Development
        <ul>
            <li>HTML
                <ul>
                    <li>Struktur Dasar</li>
                    <li>Semantic HTML</li>
                </ul>
            </li>
            <li>CSS
                <ol>
                    <li>CSS Basics</li>
                    <li>Flexbox</li>
                    <li>Grid</li>
                </ol>
            </li>
            <li>JavaScript</li>
        </ul>
    </li>
    <li>Backend Development
        <ol type="I">
            <li>Node.js</li>
            <li>Python</li>
            <li>PHP</li>
        </ol>
    </li>
</ul>
nested-list.html
  • Frontend Development
    • HTML
      • Struktur Dasar
      • Semantic HTML
    • CSS
      1. CSS Basics
      2. Flexbox
      3. Grid
    • JavaScript
  • Backend Development
    1. Node.js
    2. Python
    3. PHP

Contoh Implementasi Lengkap

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Menu Restoran - Contoh List HTML</title>
</head>
<body>
    <h1>🍽️ Menu Restoran Nusantara</h1>
    
    <h2>🥘 Makanan Utama</h2>
    <ul>
        <li>Nasi Goreng Spesial
            <ul>
                <li>Level Pedas: 1-5</li>
                <li>Tambahan Telur</li>
            </ul>
        </li>
        <li>Sate Ayam Madura</li>
        <li>Gado-gado Jakarta</li>
        <li>Rendang Padang</li>
    </ul>
    
    <h2>🥤 Minuman</h2>
    <ol type="A">
        <li>Es Teh Manis</li>
        <li>Es Jeruk Segar</li>
        <li>Jus Alpukat</li>
        <li>Kopi Tubruk</li>
    </ol>
    
    <h2>📝 Informasi Menu</h2>
    <dl>
        <dt>Nasi Goreng Spesial</dt>
        <dd>Nasi yang digoreng dengan bumbu rahasia, dilengkapi ayam, udang, dan sayuran.</dd>
        
        <dt>Sate Ayam Madura</dt>
        <dd>Sate ayam dengan bumbu kacang khas Madura, disajikan dengan lontong.</dd>
        
        <dt>Level Pedas</dt>
        <dd>Skala 1-5, dengan 5 sebagai tingkat kepedasan tertinggi.</dd>
    </dl>
    
    <h2>👨‍🍳 Proses Memasak</h2>
    <ol start="1">
        <li>Persiapan bahan segar</li>
        <li>Memasak dengan teknik tradisional</li>
        <li value="5">Quality control</li>
        <li>Penyajian dengan presentation terbaik</li>
    </ol>
</body>
</html>
menu-restoran.html

🍽️ Menu Restoran Nusantara

🥘 Makanan Utama

  • Nasi Goreng Spesial
    • Level Pedas: 1-5
    • Tambahan Telur
  • Sate Ayam Madura
  • Gado-gado Jakarta
  • Rendang Padang

🥤 Minuman

  1. Es Teh Manis
  2. Es Jeruk Segar
  3. Jus Alpukat
  4. Kopi Tubruk

📝 Informasi Menu

Nasi Goreng Spesial
Nasi yang digoreng dengan bumbu rahasia, dilengkapi ayam, udang, dan sayuran.
Sate Ayam Madura
Sate ayam dengan bumbu kacang khas Madura, disajikan dengan lontong.
Level Pedas
Skala 1-5, dengan 5 sebagai tingkat kepedasan tertinggi.

👨‍🍳 Proses Memasak

  1. Persiapan bahan segar
  2. Memasak dengan teknik tradisional
  3. Quality control
  4. Penyajian dengan presentation terbaik

Latihan Praktik

Buat Struktur List Komprehensif

Pemula

🎯 Tujuan:

Buat halaman HTML yang mendemonstrasikan pemahaman tentang semua jenis list dan fitur-fiturnya dalam konteks yang realistis.

📋 Requirements:

Unordered List
  • Minimal 4 item utama
  • Sertakan nested list
  • Gunakan berbagai bullet styles
Ordered List
  • Gunakan type="I"
  • Atur start value
  • Gunakan value pada item
Description List
  • 3 istilah dengan deskripsi
  • Deskripsi yang informatif
  • Struktur yang jelas
Nested List
  • Minimal 2 level nesting
  • Kombinasi ul dan ol
  • Struktur hierarki yang logis
Ide Proyek: Buat menu restoran, daftar belanja, itinerary perjalanan, atau struktur organisasi untuk menerapkan semua jenis list dengan konteks yang meaningful.
Sebelumnya: Formatting Text Selanjutnya: Link & Gambar