Lists

Setelah lesson ini, kamu dapat membuat daftar berurutan, tidak berurutan, dan satu daftar bersarang dengan relasi yang tepat.

MULAI DARI SEBUAH PERTANYAAN

Pemahaman berawal dari pertanyaan.

Bahan memasak boleh dibeli dalam urutan berbeda. Langkah memasaknya belum tentu. Dua jenis daftar membantu pembaca mengetahui kapan urutan memang penting.

Membuat daftar berurutan, tidak berurutan, dan satu daftar bersarang dengan relasi yang tepat.

PAHAMI KONSEPNYA

Ul atau ol?

Ul adalah unordered list: daftar yang urutannya tidak menentukan arti, seperti perlengkapan. Ol adalah ordered list: urutan penting, seperti langkah menanam. Setiap item ditulis dengan li di dalam ul atau ol.

Sarang berada di dalam item

Jika satu perlengkapan punya rincian, masukkan daftar tambahan ke dalam li milik perlengkapan itu. Daftar anak tidak diletakkan sejajar dengan li tanpa pembungkus. Hubungan parent–child ini membuat rincian jelas milik item tertentu.

Daftar memberi pola yang bisa dikenali

Jangan mengetik tanda minus atau angka ke satu paragraf untuk meniru daftar. Elemen daftar menyampaikan pengelompokan pada browser dan teknologi bantu. Tidak semua paragraf perlu dijadikan daftar; gunakan ketika isinya memang serangkaian item.

CONTOH / KONTEKS

Contoh memperjelas konsep.

CONTOH HTML

<h2>Perlengkapan</h2>
<ul>
  <li>Pot</li>
  <li>Media tanam
    <ul><li>Tanah</li><li>Kompos</li></ul>
  </li>
</ul>
<h2>Langkah menanam</h2>
<ol>
  <li>Isi pot dengan media.</li>
  <li>Letakkan benih.</li>
  <li>Siram secukupnya.</li>
</ol>

HASIL DI BROWSER

Perlengkapan memakai ul; langkah memakai ol. Daftar Tanah dan Kompos berada di dalam li Media tanam.

KESALAHAN YANG SERING TERJADI

<ul>
  <li>Media tanam</li>
  <ul><li>Kompos</li></ul>
</ul>

Daftar anak harus berada di dalam li yang dijelaskannya. Pindahkan </li> Media tanam setelah daftar anak ditutup.

COBA BERSAMA

Praktik memperjelas pemahaman.

Pilih elemen untuk tiga langkah yang urutannya penting.

<>
  <li>Siapkan pot.</li>
  <li>Isi tanah.</li>
  <li>Tanam benih.</li>
</ol>

Lihat petunjuk

Ordered list disingkat dengan dua huruf.

Boleh mencoba berkali-kali. Tugas mandiri berikutnya menjadi bukti penyelesaian lesson.

TULIS · LIHAT · PAHAMI

Siapkan klub baca

Buat ul dengan minimal dua perlengkapan. Pada salah satu li, tambahkan ul berisi dua rincian. Buat ol terpisah dengan minimal tiga langkah memulai sesi membaca.

<h2>Perlengkapan Klub Baca</h2>
<!-- Tulis daftar perlengkapan -->
<h2>Urutan Sesi</h2>
<!-- Tulis langkah sesi -->

index.htmlHTMLLn 1, Col 14 baris2 spasi

Pintasan & bantuan editor

Ctrl + Space: Tampilkan saran · ↑ ↓ memilih · Enter menerima · Esc menutup
Shift + Alt + F: Rapikan kode
Ctrl/⌘ + F: Cari dan ganti teks
Ctrl/⌘ + [ / ]: Kurangi / tambah indentasi
Tab: Pindah fokus; dalam snippet, pindah ke isian berikutnya. Esc lalu Tab untuk keluar.
Ctrl/⌘ + Z: Batalkan perubahan, termasuk format

Saran berasal dari bahasa, snippet, dan konteks lokal kode. Format berjalan di browser.

Preview dokumen

Ctrl/⌘ + Enter menjalankan preview. Preview memakai gaya bantu baca. Script dan pengiriman form dinonaktifkan. Ilustrasi contoh: assets/observatory.svg.

BAWA PEMAHAMAN INI BERSAMAMU

Praktik memberi dasar.

Ul untuk kelompok; ol untuk urutan.
Setiap item ditandai li.
Daftar bersarang berada di dalam li induknya.

DaftarSintaks HTML

Lesson tuntas setelah tugas mandiri memenuhi tujuan. Kamu bebas membaca kembali kapan saja.

Hubungkan dengan konsep lain

HTML list °HTML element °

Library: Tiga bahasa di balik satu halaman ↗

Ke lesson berikutnya →