Daftar: Berurut, Tak Berurut, & Definisi

Membuat daftar dengan ul, ol, li, daftar bersarang, atribut start dan reversed, serta daftar definisi dl.

Part 8 dari 20 ± 30 menit Gratis

Tiga jenis daftar

Tag	Nama	Dipakai untuk
`<ul>`	Unordered list	Daftar butir, urutan tidak penting (belanjaan)
`<ol>`	Ordered list	Daftar bernomor, urutan penting (resep, langkah)
`<dl>`	Description list	Pasangan istilah dan penjelasannya (glosarium)

Daftar tak berurut dan berurut

Setiap butir daftar ditulis dengan <li> (list item), dan <li> hanya boleh menjadi anak langsung dari ul atau ol.

<ul>
  <li>Beras</li>
  <li>Telur</li>
  <li>Minyak goreng</li>
</ul>

<ol>
  <li>Panaskan minyak</li>
  <li>Goreng telur</li>
  <li>Sajikan</li>
</ol>

Atribut untuk <ol>

start="5": mulai dari angka 5.
reversed: menghitung mundur (cocok untuk peringkat).
type="A": pakai huruf (A, B, C). Gaya angka kini lebih baik diatur CSS.

Daftar bersarang (nested)

Daftar boleh berada di dalam butir daftar lain. Letakkan daftar anak di dalam <li> induknya, bukan di antara dua <li>.

<ul>
  <li>Buah
    <ul>
      <li>Apel</li>
      <li>Jeruk</li>
    </ul>
  </li>
  <li>Sayur</li>
</ul>

Daftar definisi

<dl>
  <dt>HTML</dt>
  <dd>Bahasa untuk menyusun struktur halaman web.</dd>
  <dt>CSS</dt>
  <dd>Bahasa untuk mengatur tampilan halaman.</dd>
</dl>

<dt> adalah istilah (term) dan <dd> adalah deskripsinya.

Daftar dan navigasi

Menu navigasi website hampir selalu dibuat dari <ul> berisi tautan. Itu sebabnya daftar penting dikuasai. Dengan CSS, daftar bisa dibuat menjadi menu horizontal yang cantik.