Membuat List Pada HTML

Cara membuat list ataupun daftar di HTML hanya memerlukan tag yang lebih sederhana dan mungkin Anda tidak akan kerepotan membuatnya.

Daftar isi:

Daftar tidak berurutan (Unordered List)

Tag <ul> mendefinisikan daftar yang tidak berurutan akan ditampilkan dengan lingkaran peluru berwarna hitam kecil secara bawaan. Berikut contohnya:

<ul>
    <li>Durian</li>
    <li>Jeruk</li>
    <li>Semangka</li>
</ul>

Daftar berurutan (Ordered List)

Tag <ol> mendefinisikan daftar yang berurutan akan tampil dengan nomor. Berikut contohnya:

<ol>
    <li>Durian</li>
    <li>Jeruk</li>
    <li>Semangka</li>
</ol>

Daftar definisi (Definition List)

Daftar definisi merupakan daftar yang dilengkapi dengan adanya deskripsi atau uraian pada masing-masing daftar. Ada 3 tag yang perlu digunakan, sebagai berikut:

  • Tag <dl> (definition list), menentukan daftar deskripsi.
  • Tag <dt> (definition term), menentukan istilah deskripsi.
  • Tag <dd> (definition description), mendeskripsikan istilah dalam daftar deskripsi.
<dl>
    <dt>Durian</dt>
        <dd>Memiliki duri yang tajam</dd>
    <dt>Jeruk</dt>
        <dd>Berbentuk bulat dan kulit yang pahit</dd>
    <dt>Semangka</dt>
        <dd>berbentuk lonjong dan buah berwarna merah atau kuning</dd>
</dl>

Daftar yang bersarang

Tentu saja list HTML bisa menampilkan daftar yang bersarang dengan memahami contoh yang diatas. Berikut contohnya:

<ol>
  <li>Bakso</li>
  <li>Sate
    <ol>
      <li>Sate ayam</li>
      <li>Sate kambing</li>
    </ol>
  </li>
</ol>

profil

DITULIS OLEH

Febri Hidayan

Berikan saya sponsor terbaik Anda agar saya tetap semangat menulis artikel yang bermanfaat. Terimakasih 😊