Cara Membuat List pada HTML

Cara membuat list pada HTML adalah keterampilan dasar yang wajib dikuasai agar struktur konten di website rapi, mudah dibaca, dan ramah mesin pencari.

Halo teman-teman, semoga kalian sehat dan semangat belajar web! Pada artikel ini kodelyly.com akan membahas cara yang tepat dan modern untuk membuat list di HTML, lengkap dengan contoh kode, tips SEO, dan praktik terbaik agar konten kalian tampil jelas di semua perangkat.

Cara Membuat List Pada HTML

Membuat list pada HTML bisa menggunakan tiga elemen utama, yaitu <ul> untuk daftar tak berurutan, <ol> untuk daftar berurutan, dan <dl> untuk daftar deskriptif. Ketiganya bersifat semantik sehingga membantu mesin pencari memahami hierarki informasi.

Contoh daftar tak berurutan:

<ul>
  <li>Apel</li>
  <li>Pisang</li>
  <li>Jeruk</li>
</ul>

Contoh daftar berurutan dengan pengaturan nomor:

<ol start="3" type="I">
  <li>Analisis</li>
  <li>Desain</li>
  <li>Implementasi</li>
</ol>

Contoh daftar deskriptif untuk istilah dan definisi:

<dl>
  <dt>HTTP</dt>
  <dd>Protokol yang digunakan untuk mentransfer data di web.</dd>
  <dt>API</dt>
  <dd>Antarmuka untuk menghubungkan aplikasi satu dengan yang lain.</dd>
</dl>

Perbandingan Jenis List HTML

List Bersarang (Nested List)

Kadang kalian perlu sub-poin di dalam item. Letakkan list di dalam <li> agar struktur tetap valid.

<ol>
  <li>Persiapan
    <ul>
      <li>Riset kata kunci</li>
      <li>Outline konten</li>
    </ul>
  </li>
  <li>Produksi</li>
</ol>

Styling Dasar Dengan CSS

List bisa disesuaikan tampilannya tanpa mengorbankan semantik. Gunakan CSS untuk mengubah marker, jarak, dan aksesibilitas.

<ul class="fitur">
  <li>Ringan</li>
  <li>Responsif</li>
</ul>

<style>
  .fitur { padding-left: 1.25rem; }
  .fitur li { margin: 0.25rem 0; }
  .fitur { list-style-type: square; }
</style>

Praktik Terbaik & SEO

Pastikan setiap daftar menggunakan elemen yang tepat sesuai konteks. Untuk panduan berurutan, pilih <ol> agar urutan terbaca jelas oleh pengguna dan crawler. Hindari membungkus list dengan tag yang tidak perlu. Gunakan judul H2 yang mengandung kata kunci “cara membuat list pada HTML” agar relevansi meningkat. Sertakan deskripsi singkat sebelum atau sesudah list agar mesin pencari memahami maksud bagian tersebut.

Contoh HTML Siap Pakai

Salin tempel contoh berikut untuk belajar cepat.

1. OL terbalik (reversed) dan mulai angka tertentu

<ol reversed start="5">
  <li>Deploy</li>
  <li>Uji Coba</li>
  <li>Build</li>
</ol>

2. List bersarang yang valid

<ol>
  <li>Persiapan
    <ul>
      <li>Riset kata kunci</li>
      <li>Outline konten</li>
    </ul>
  </li>
  <li>Produksi</li>
</ol>

3. Custom marker tanpa gambar

<ul class="cek">
  <li>Responsif</li>
  <li>Ringan</li>
  <li>Aksesibel</li>
</ul>

<style>
  .cek { list-style: none; padding-left: 1.25rem; }
  .cek li { position: relative; margin: 0.25rem 0; }
  .cek li::before { content: "✔ "; position: absolute; left: -1.25rem; }
</style>

4. Custom marker memakai gambar kecil

<ul class="ikon">
  <li>Tersinkron otomatis</li>
  <li>Backup harian</li>
</ul>

<style>
  .ikon { list-style: none; padding-left: 1.5rem; }
  .ikon li { background: url('check-12.png') no-repeat left 0.25rem; padding-left: 1.25rem; margin: 0.25rem 0; }
</style>

5. Daftar deskriptif untuk glosarium

<dl>
  <dt>Semantic HTML</dt>
  <dd>Penggunaan tag sesuai makna untuk aksesibilitas dan SEO.</dd>
  <dt>Viewport</dt>
  <dd>Area tampilan halaman pada perangkat.</dd>
</dl>

FAQ: Cara Membuat List Pada HTML

Apa beda <ul> dan <ol>?
<ul> menampilkan poin tanpa urutan, sedangkan <ol> memberi nomor sehingga cocok untuk langkah proses.

Kapan pakai <dl>?
Gunakan saat kalian memiliki pasangan istilah dan definisi, seperti glosarium atau spesifikasi.

Bagaimana memulai penomoran dari angka tertentu?
Tambahkan atribut start pada <ol>, misalnya <ol start="10">.

Bagaimana membuat nomor mundur?
Gunakan atribut reversed pada <ol> seperti <ol reversed>.

Bagaimana menghilangkan bullet standar?
Hapus dengan CSS list-style: none lalu tambahkan ikon sendiri melalui pseudo-element ::before agar tetap semantik.

Kesimpulan

Inti dari cara membuat list pada HTML adalah memilih elemen yang sesuai tujuan: <ul> untuk poin bebas, <ol> untuk langkah bernomor, dan <dl> untuk istilah–definisi. Dengan struktur semantik, contoh kode yang rapi, serta sedikit styling CSS, daftar kalian akan mudah dipahami pengguna sekaligus optimal untuk SEO. Sekian artikel dari kodelyly.com, semoga membantu dan sampai jumpa di pembahasan berikutnya!