Daftar

Daftar belanja dan resep sama-sama daftar, tetapi hanya salah satunya yang rusak kalau urutannya diubah. HTML punya elemen berbeda untuk masing-masing.

Daftar tak berurutan dan daftar berurutan

Kalau urutan butir tidak penting, pakai daftar tak berurutan, <ul>. Browser menandai setiap butir dengan titik poin. Kalau urutannya penting, seperti langkah-langkah resep atau peringkat, pakai daftar berurutan, <ol>, dan browser menomori butirnya untukmu. Dalam kedua kasus, setiap butir adalah <li>, butir daftar, dan satu-satunya elemen yang boleh berada langsung di dalam <ul> atau <ol> adalah elemen <li>. Teks dan elemen lain ditaruh di dalam butir.

<h2>You will need</h2>
<ul>
  <li>500 g flour</li>
  <li>10 g salt</li>
  <li>350 ml warm water</li>
</ul>

<h2>Method</h2>
<ol>
  <li>Mix everything in a bowl.</li>
  <li>Leave it covered for 12 hours.</li>
  <li>Shape and bake at 230 degrees for 40 minutes.</li>
</ol>

Mengapa tidak mengetik sendiri nomor atau tanda pisahnya? Karena dengan begitu browser tidak tahu bahwa itu daftar. Pembaca layar mengumumkan daftar sungguhan beserta panjangnya, misalnya daftar, 3 butir, sehingga pendengar tahu berapa banyak yang akan datang dan bisa melewatinya. Saat kamu menyisipkan langkah ke dalam <ol>, setiap nomor sesudahnya diperbarui dengan sendirinya; dengan nomor yang diketik, kamu harus menomori ulang dengan tangan.

Pilihan untuk daftar berurutan

<ol> punya beberapa atribut. start="4" memulai hitungan dari 4, berguna saat daftar berlanjut setelah sebuah paragraf. reversed menghitung mundur, untuk sepuluh besar. type mengganti penanda menjadi huruf atau angka Romawi: type="a", type="A", type="i", atau type="I". Satu butir juga bisa melompat ke nomor tertentu dengan value, seperti <li value="10">. Tampilan titik poin dan nomor (bentuk, warna, atau apakah ditampilkan sama sekali) diatur oleh CSS.

Daftar di dalam daftar

Sebuah butir daftar bisa memuat seluruh daftar. Taruh <ul> atau <ol> bagian dalam di dalam <li> tempatnya, setelah teks butir itu dan sebelum tag penutupnya. Kesalahan yang umum adalah menaruh daftar dalam di antara dua elemen <li>, langsung di dalam daftar luar, yang tidak diperbolehkan. Daftar bersarang adalah cara situs membuat menu dengan submenu dan cara kerangka menampilkan subpoin.

<ul>
  <li>Bread
    <ul>
      <li>Sourdough</li>
      <li>Rye</li>
    </ul>
  </li>
  <li>Cakes</li>
</ul>

Daftar deskripsi

Jenis daftar ketiga memasangkan istilah dengan deskripsi, seperti glosarium atau kumpulan tanya jawab. <dl> adalah daftar deskripsi, <dt> memuat istilah, dan <dd> memuat deskripsinya. Satu istilah bisa punya beberapa deskripsi, dan beberapa istilah bisa berbagi satu deskripsi. Browser menjorokkan deskripsi secara bawaan.

Daftar muncul di tempat yang mungkin tidak kamu duga. Menu di bagian atas sebagian besar situs adalah <ul> berisi tautan di dalam <nav>; CSS menata butirnya dalam satu baris dan menyembunyikan titik poinnya. Deretan kartu produk atau kumpulan hasil pencarian juga sering berupa daftar. Saat kamu melihat sekelompok hal yang serupa, tanyakan apakah itu daftar; jawabannya biasanya ya.

Cara cepat memilih di antara keduanya: bayangkan butirnya diacak. Kalau pengacakan mengubah makna, seperti pada langkah resep atau sepuluh besar, daftarnya berurutan dan memerlukan <ol>. Kalau tidak ada yang berubah, seperti daftar barang bawaan, pakai <ul>. Buat setiap butir singkat dan awali butir-butir dengan bentuk tata bahasa yang sama, agar daftar mudah dipindai.