🎨

Frontend Fundamentals

Kursus Gratis — Fullstack Talent

HTML — Fondasi Halaman Web
5

List: Ordered, Unordered, Description

📖 12 menit baca 🏷️ Beginner

List (daftar) adalah cara untuk menampilkan informasi secara terstruktur dan mudah dibaca. HTML menyediakan 3 jenis list: unordered (tanpa nomor), ordered (bernomor), dan description (definisi). Mari pelajari cara menggunakannya.

● Unordered List (Daftar Tanpa Nomor)

Gunakan <ul> untuk daftar yang urutannya tidak penting. Setiap item menggunakan tag <li> (list item).

unordered.html 
<h3>Keahlian Saya:</h3>
<ul>
    <li>HTML & CSS</li>
    <li>JavaScript</li>
    <li>React</li>
    <li>Node.js</li>
</ul>
🖥️ Preview:

Keahlian Saya:

  • HTML & CSS
  • JavaScript
  • React
  • Node.js

✅ Kapan pakai <ul>? Ketika urutan item tidak berpengaruh — misalnya daftar skill, menu navigasi, daftar fitur, atau bahan masakan.

1. Ordered List (Daftar Bernomor)

Gunakan <ol> untuk daftar yang urutannya penting. Browser akan otomatis menambahkan nomor.

ordered.html 
<h3>Cara Membuat Website:</h3>
<ol>
    <li>Buka text editor (VS Code)</li>
    <li>Tulis kode HTML</li>
    <li>Tambahkan CSS untuk styling</li>
    <li>Tambahkan JavaScript untuk interaksi</li>
    <li>Deploy ke internet</li>
</ol>
🖥️ Preview:

Cara Membuat Website:

  1. Buka text editor (VS Code)
  2. Tulis kode HTML
  3. Tambahkan CSS untuk styling
  4. Tambahkan JavaScript untuk interaksi
  5. Deploy ke internet

⚙️ Atribut <ol>

ol-atribut.html 
<!-- Mulai dari nomor 5 -->
<ol start="5">
    <li>Item kelima</li>
    <li>Item keenam</li>
</ol>

<!-- Urutan terbalik -->
<ol reversed>
    <li>Langkah terakhir</li>
    <li>Langkah kedua</li>
    <li>Langkah pertama</li>
</ol>

<!-- Tipe penomoran berbeda -->
<ol type="A"> <!-- A, B, C... -->
<ol type="a"> <!-- a, b, c... -->
<ol type="I"> <!-- I, II, III... -->
<ol type="i"> <!-- i, ii, iii... -->

type="1" (default)

  1. Item
  2. Item
  3. Item

type="A"

  1. Item
  2. Item
  3. Item

type="I"

  1. Item
  2. Item
  3. Item

type="a"

  1. Item
  2. Item
  3. Item

📖 Description List (Daftar Definisi)

Gunakan <dl> untuk daftar pasangan istilah → definisi. Cocok untuk glossary, FAQ, atau spesifikasi produk.

description.html 
<dl>
    <dt>HTML</dt>
    <dd>HyperText Markup Language — bahasa untuk
        membuat struktur halaman web.</dd>

    <dt>CSS</dt>
    <dd>Cascading Style Sheets — bahasa untuk
        mengatur tampilan halaman web.</dd>

    <dt>JavaScript</dt>
    <dd>Bahasa pemrograman untuk menambahkan
        interaktivitas pada halaman web.</dd>
</dl>
🖥️ Preview:
HTML
HyperText Markup Language — bahasa untuk membuat struktur halaman web.
CSS
Cascading Style Sheets — bahasa untuk mengatur tampilan halaman web.
JavaScript
Bahasa pemrograman untuk menambahkan interaktivitas pada halaman web.
<dl>

Description List — wadah utama

<dt>

Description Term — istilah/judul

<dd>

Description Details — penjelasan

🪆 Nested List (List Bersarang)

Kamu bisa meletakkan list di dalam list untuk membuat sub-item:

nested.html 
<h3>Kurikulum Frontend</h3>
<ol>
    <li>HTML
        <ul>
            <li>Struktur dasar</li>
            <li>Tag umum</li>
            <li>Form</li>
        </ul>
    </li>
    <li>CSS
        <ul>
            <li>Selector</li>
            <li>Box Model</li>
            <li>Flexbox & Grid</li>
        </ul>
    </li>
    <li>JavaScript
        <ul>
            <li>Variabel & Tipe Data</li>
            <li>DOM Manipulation</li>
        </ul>
    </li>
</ol>
🖥️ Preview:

Kurikulum Frontend

  1. HTML
    • Struktur dasar
    • Tag umum
    • Form
  2. CSS
    • Selector
    • Box Model
    • Flexbox & Grid
  3. JavaScript
    • Variabel & Tipe Data
    • DOM Manipulation

🆚 Kapan Pakai yang Mana?

List Kapan Digunakan Contoh
<ul> Urutan tidak penting Daftar skill, ingredients, fitur produk
<ol> Urutan penting Langkah tutorial, ranking, resep masakan
<dl> Pasangan istilah + definisi Glossary, FAQ, spesifikasi produk

💻 Contoh Lengkap: Halaman Resep

resep.html 
<h1>🍳 Resep Nasi Goreng</h1>

<!-- Info resep (description list) -->
<dl>
    <dt>⏱ Waktu memasak</dt>
    <dd>15 menit</dd>
    <dt>👨‍🍳 Tingkat kesulitan</dt>
    <dd>Mudah</dd>
    <dt>🍽 Porsi</dt>
    <dd>2 orang</dd>
</dl>

<hr>

<!-- Bahan (unordered — urutan tidak penting) -->
<h2>Bahan-bahan</h2>
<ul>
    <li>2 piring nasi putih (sisa semalam)</li>
    <li>2 butir telur</li>
    <li>3 siung bawang putih</li>
    <li>2 sdm kecap manis</li>
    <li>Garam & merica secukupnya</li>
</ul>

<!-- Langkah (ordered — urutan penting!) -->
<h2>Langkah Memasak</h2>
<ol>
    <li>Panaskan wajan dengan minyak goreng</li>
    <li>Tumis bawang putih hingga harum</li>
    <li>Masukkan telur, orak-arik</li>
    <li>Tambahkan nasi, aduk rata</li>
    <li>Bumbui kecap, garam, merica</li>
    <li>Aduk hingga merata, sajikan!</li>
</ol>
🖥️ Preview:

🍳 Resep Nasi Goreng

⏱ Waktu memasak
15 menit
👨‍🍳 Tingkat kesulitan
Mudah
🍽 Porsi
2 orang

Bahan-bahan

  • 2 piring nasi putih (sisa semalam)
  • 2 butir telur
  • 3 siung bawang putih
  • 2 sdm kecap manis
  • Garam & merica secukupnya

Langkah Memasak

  1. Panaskan wajan dengan minyak goreng
  2. Tumis bawang putih hingga harum
  3. Masukkan telur, orak-arik
  4. Tambahkan nasi, aduk rata
  5. Bumbui kecap, garam, merica
  6. Aduk hingga merata, sajikan!

⚠️ Kesalahan Umum

❌ Salah

<ul>
  <p>Item 1</p>
  <p>Item 2</p>
</ul>

Isi <ul> harus <li>, bukan <p>

✅ Benar

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

Selalu gunakan <li> di dalam list

❌ Salah

<li>Item tanpa list</li>

<li> tanpa <ul> atau <ol>

✅ Benar

<ul>
  <li>Item di dalam list</li>
</ul>

<li> selalu di dalam <ul> / <ol>

📋 Ringkasan

✓ <ul> — unordered list (bullet). Untuk daftar tanpa urutan khusus
✓ <ol> — ordered list (nomor). Atribut: start, reversed, type
✓ <dl> — description list. Gunakan <dt> + <dd> untuk istilah + definisi
✓ List bisa bersarang (nested) — letakkan list di dalam <li>
✓ <li> harus selalu di dalam <ul> atau <ol>, bukan berdiri sendiri
Link (anchor), gambar, dan multimedia Tabel untuk data terstruktur
📘 Intro 🎨 CSS