Tutorial HTML / Membuat dan menyarangkan daftar ul, ol, dan dl

Pilih ol jika urutan elemen penting, ul jika tidak masalah, dan dl untuk nama yang terkait dengan deskripsi atau nilai. Elemen-elemen ini menggambarkan hubungan antara elemen; nomor dan penanda butir standar mereka hanya untuk tampilan.

Kapan sebaiknya menggunakan ol, ul, atau dl?

Elemen dalam ol dan ul menggunakan li. Dalam dl, dt memberikan nama dan dd memberikan deskripsi atau nilainya.

Cobalah tiga jenis daftar dalam file yang sama

Simpan kode ini sebagai file HTML dan buka di browser untuk membandingkan tampilan standar daftar. CSS meminta font Noto Sans KR jika terpasang; jika tidak, browser akan menggunakan font cadangan tanpa serif.

<!doctype html>
<html lang="id-ID">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Daftar HTML</title>
    <style>
      body { font-family: "Noto Sans KR", sans-serif; }
    </style>
  </head>
  <body>
    <h1>Mempersiapkan perjalanan</h1>
    <h2>Perlengkapan</h2>
    <ul>
      <li>Air</li>
      <li>Peta</li>
    </ul>
    <h2>Langkah-langkah</h2>
    <ol>
      <li>Memilih tanggal perjalanan</li>
      <li>Mengemas tas</li>
    </ol>
    <h2>Istilah</h2>
    <dl>
      <dt>Keberangkatan</dt>
      <dd>Hari keberangkatan perjalanan</dd>
      <dt>Kedatangan</dt>
      <dd>Hari Anda mencapai tujuan</dd>
    </dl>
  </body>
</html>

CSS dapat mengubah indentasi dan gaya penanda. Perbedaan penting adalah hubungan urutan atau nama-deskripsi, yang diungkapkan melalui HTML.

Mengubah penomoran daftar yang terurut

Sebuah ol dimulai secara default dengan 1. Atributnya start mengubah nomor pertama; value pada li tertentu mengubah nomor elemen ini.

<ol start="5">
  <li>Langkah kelima</li>
  <li value="9">Langkah kesembilan</li>
  <li>Langkah kesepuluh</li>
</ol>

Penanda adalah 5, 9, dan 10. Gunakan reversed jika penomoran harus menurun.

<ol reversed>
  <li>Elemen ketiga</li>
  <li>Elemen kedua</li>
  <li>Elemen pertama</li>
</ol>

Sendirian, daftar yang diberi nomor mundur ini tanpa nilai awal menghitung mundur dari ketiga elemennya seperti 3, 2, 1. Periksa apakah penomoran sesuai dengan urutan yang dimaksud.

Atribut penomoran tidak mengubah kumpulan yang tidak teratur menjadi urutan yang berarti. Pilih jenis daftar terlebih dahulu berdasarkan maknanya.

Atur nama dan deskripsinya dengan dl

Sebuah dl tidak terbatas pada definisi kamus. Itu bisa menghubungkan sifat produk dengan nilainya atau tanggal dengan deskripsinya. Buat setiap entri dt dan dd mudah dihubungkan.

<dl>
  <dt>Jam buka</dt>
  <dd>Pada hari kerja, dari jam 9 sampai jam 18</dd>
  <dt>Tutup</dt>
  <dd>Hari Sabtu dan Minggu</dd>
</dl>

Ini adalah jam buka fiktif yang hanya digunakan untuk menunjukkan penandaan.

Sarangkan daftar di dalam elemen li

Subdaftar harus berada di dalam elemen induk li yang mengembangkannya. Di sini, pakaian merupakan bagian dari perlengkapan perjalanan. Lihat Sintaks HTML untuk aturan menutup elemen bersarang dari dalam ke luar.

<ul>
  <li>Air</li>
  <li>Pakaian
    <ul>
      <li>Jaket</li>
      <li>Kaos kaki</li>
    </ul>
  </li>
</ul>

Anda juga dapat menyisipkan ul di dalam ol. Dalam contoh ini, langkah-langkah utama memiliki urutan yang signifikan, tetapi kedua barang yang akan dikemas tidak.

<ol>
  <li>Memilih tanggal perjalanan</li>
  <li>Mengemas tas
    <ul>
      <li>Pakaian</li>
      <li>Perlengkapan mandi</li>
    </ul>
  </li>
  <li>Bepergian</li>
</ol>

Jangan menempatkan subdaftar langsung di bawah ul atau ol eksternal; letakkan di dalam li yang sesuai. Selain itu, hindari menempatkan seluruh daftar di dalam p. Daftar dan paragraf adalah struktur yang terpisah.

Daftar periksa untuk membuat daftar

• Tentukan apakah urutan elemen mengubah makna sebelum memilih ol atau ul.
• Gunakan li untuk setiap elemen dari daftar berurutan atau tidak berurutan.
• Jelaskan hubungan dt–dd dalam sebuah daftar deskriptif.
• Masukkan subdaftar di dalam elemen induk li Anda, dan gunakan CSS untuk tampilan penanda.

Untuk contoh lebih lanjut, lihat panduan MDN tentang daftar HTML. Untuk menggunakan daftar dalam kumpulan halaman yang sebenarnya, mulailah dengan struktur file di Membuat situs web kecil multi-halaman.