Menampilkan daftar HTML - Referensi HTML

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

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:

Belajar link
Belajar gambar
Belajar list

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

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