Logo Komodo Koding /Koding

Menampilkan daftar HTML

Daftar atau list bisa kita tampilkan di HTML dengan tiga cara berbeda, menggunakan tag ul, ol atau dt

Membuat daftar makanan, daftar tugas, daftar belanja dan daftar lainnya, akan sulit jika terlihat seperti tulisan lainnya. Untung saja HTML punya cara untuk menampilkan sebuah daftar dengan menarik. Sehingga bisa terlihat seperti ini:

  • Bangun Pagi
  • Belajar HTML
  • Mandi kilat

😳 Info

Lihat deh ada bulatan di sebelah kiri, menandakan elemen ini adalah sebuah daftar.

List tanpa nomor

Untuk menampikan sebuah daftar tanpa nomor yang berurutan, kita bisa menggunakan tag <ul> yang membungkus sederet list <li>

<ul>
    <li> Belajar link </li>
    <li> Belajar gambar </li>
    <li> Belajar list </li>
</ul>

Kode di atas menghasilkan:

  • Belajar link
  • Belajar gambar
  • Belajar list

Tag <li> nya boleh sebanyak apapun, sementara tag pembungkusnya yaitu <ul> cukup satu saja.

List dengan nomor

Untuk menampikan sebuah daftar dengan nomor urutannya, kita bisa menggunakan tag <ol> yang membungkus sederet list <li>

<ol>
    <li> Belajar link </li>
    <li> Belajar gambar </li>
    <li> Belajar list </li>
</ol>

Kode di atas menghasilkan:

  1. Belajar link
  2. Belajar gambar
  3. Belajar list

😳 Info

Kamu lihat sekarang bukan hanya bulatan di sebelah kirinya? tapi sudah ada nomor urutannya.

Tag <li> nya boleh sebanyak apapun, sementara tag pembungkusnya yaitu <ol> cukup satu saja.

Daftar deskripsi

Selain kedua daftar biasa, HTML juga menyediakan cara menampilkan daftar dengan deskripsinya, menggunakan tag <dl> (description list) yang membungkus <dt> (definition term) dan <dd> yang berisi penjelasannya.

<dl>
  <dt>Air</dt>
  <dd>- elemen yang menenangkan</dd>
  <dt>API</dt>
  <dd>- elemen yang membuat panas</dd>
</dl>

Kode di atas menghasilkan

Air
- elemen yang menenangkan
API
- elemen yang membuat panas

😳 Info

Sekarang ada garis tanda kurang di setiap penjelasan dari masing masing daftar yang dibuat di tag dt.