Aturan dan teknik bersarang sudah lengkap. Penutup Section ini kembali ke lapangan: bagaimana list benar-benar dipakai pada halaman sehari-hari. Lima pola berikut muncul hampir di setiap situs yang kita kunjungi.

Chapter ini membedah pola navigasi, breadcrumb, daftar artikel, daftar fitur, dan langkah instruksi, lalu merakit semuanya dalam satu artikel mini sebagai latihan penutup.

Menu navigasi adalah pemakai ul terbesar di web. Polanya: nav membungkus ul, tiap li memuat satu tautan a:

html 
<nav>
  <ul>
    <li><a href="index.html">Beranda</a></li>
    <li><a href="menu.html">Menu</a></li>
    <li><a href="kontak.html">Kontak</a></li>
  </ul>
</nav>

Mari kita telaah kode di atas:

  1. <nav>: penanda bahwa isinya navigasi — pembaca layar menyediakan cara melompat langsung ke bagian ini.
  2. <ul>: daftar tautan; urutan menu bisa diubah tanpa mengubah makna, jadi netral.
  3. <li> + a: satu butir memuat satu tautan — pasangan yang memudahkan CSS menata tiap menu.

Rincian tautan a dan atributnya dibahas tuntas pada Section Links dan Navigasi.

Breadcrumbs — jejak posisi halaman seperti “Beranda > Menu > Kopi Susu” — memakai ol karena urutannya menunjukkan jenjang dari halaman paling umum ke paling spesifik:

html 
<nav>
  <ol>
    <li><a href="index.html">Beranda</a></li>
    <li><a href="menu.html">Menu</a></li>
    <li>Kopi susu gula aren</li>
  </ol>
</nav>

Dua butir pertama adalah tautan; butir terakhir adalah halaman aktif, ditulis sebagai teks biasa karena tidak perlu menaut ke dirinya sendiri.

Daftar Artikel dan Daftar Fitur #

Daftar artikel terbaru pada halaman depan memakai ul; tiap li-nya bisa sederhana (satu judul bertaut) atau kaya (judul, ringkasan, tanggal). Daftar fitur produk juga ul karena sifatnya netral:

html 
<ul>
  <li>Seduh manual tanpa alat mahal</li>
  <li>Rekap pengeluaran mingguan</li>
  <li>Notifikasi saat stok kopi menipis</li>
</ul>

Langkah Instruksi #

Petunjuk pemakaian, tutorial, dan prosedur memakai ol — penomoran membantu pembaca menunjuk posisi: “ulangi langkah kedua”. Mekanismenya sudah dibahas pada chapter Ordered List; pola konten yang perlu dijaga adalah satu langkah satu li, dan kalimat pengantar diletakkan sebagai paragraf sebelum daftar.

Artikel Mini Campuran #

Berikut artikel kecil dari Kedai Kopi Siti yang memadukan paragraf, ul, dan ol dalam satu article:

html 
<article>
  <h2>Kelas Seduh Dasar</h2>
  <p>Kelas singkat dua jam di Kedai Siti untuk pemula yang ingin
  menyeduh kopi manual di rumah.</p>
  <ul>
    <li>Mengenal biji arabika dan robusta</li>
    <li>Memakai timbangan dan termometer seduh</li>
    <li>Meracik kopi susu gula aren</li>
  </ul>
  <p>Persiapan sebelum datang:</p>
  <ol>
    <li>Catat pertanyaan tentang selera kopi pribadi.</li>
    <li>Bawa cangkir favorit bila punya.</li>
  </ol>
</article>

Mari kita telaah kode di atas per bagian:

  1. Paragraf pembuka: gagasan utama kelas tetap ditulis sebagai paragraf — konteksnya runtut dan tidak sederajat dengan butir apa pun.
  2. ul materi: tiga pokok bahasan; urutannya bebas, sehingga daftarnya netral.
  3. Paragraf pengantar ol: satu kalimat penjelas sebelum daftar — daftar yang menggantung tanpa pengantar sulit dipahami konteksnya.
  4. ol persiapan: dua langkah yang urutannya bermakna — catat dulu, baru bawa cangkir.

Render artikel itu berikut, ditambah satu bagian penutup dl untuk info kelas — jadwal dan kuota memang pasangan istilah-nilai. Perhatikan penanda tiap jenis daftar saat hasilnya tampil:

Ringkasan #

  • Navigasi memakai pola nav > ul > li > a; urutan menunya netral.
  • Breadcrumb memakai ol karena urutannya menunjukkan jenjang halaman.
  • Daftar artikel dan fitur memakai ul; langkah instruksi memakai ol.
  • Artikel nyata memadukan paragraf dan daftar — keduanya saling melengkapi, bukan saling menggantikan.

Section berikutnya berpindah ke konten visual: elemen img dan seluk-beluk memasang gambar pada halaman web.