Tutorial Dasar HTML & HTML5: List (Part 3)

Di dua post sebelumnya kita sudah mempelajari hal-hal yang berkaitan dengan teks, baik itu heading maupun paragraf. Terkadang, kita ingin menulis daftar di halaman web milik kita, misalnya daftar topik yang dibahas di suatu postingan, daftar referensi, dsb. HTML menyediakan tiga jenis daftar/list yang bisa kita gunakan tergantung dengan kebutuhan.

• Ordered List yaitu list yang setiap itemnya diurutkan dengan nomor. Sebagai contoh, list yang kita buat mungkin suatu langkah-langkah untuk membuat sesuatu, seperti resep makanan, jadi nomor ini nantinya sebagai urutannya.

• Unordered List yaitu list yang secara default diurutkan dengan bullet point.

• Definition List yaitu list yang digunakan untuk menjelaskan istilah-istilah. Untuk lebih jelasnya akan kita bahas lebih lanjut.

Ordered List

Untuk membuat ordered list, kita harus meletakkan daftar yang akan kita buat di antara tag <ol> dan </ol>. Dan item-item yang ingin kita tulis kita bungkus dengan tag <li> dan </li>.

<ol>
  <li>Campur semua bahan</li>
  <li>Aduk hingga adonan mengembang</li>
  <li>Masukkan adonan ke dalam oven</li>
</ol>

Akan menjadi:

1. Campur semua bahan
2. Aduk hingga adonan mengembang
3. Masukkan adonan ke dalam oven

Unordered List

Unordered list mirip dengan ordered list, di sini kita meletakkan daftar yang ingin kita buat di antara tag <ul> dan </ul> dan item yang ingin kita tulis dibungkus dengan tag <li> dan </li>. Kalau daftar pada ordered list diawali dengan angka, daftar pada unordered list secara default diawali dengan bullet (titik bulat hitam).

<ul>
  <li>Tepung Terigu</li>
  <li>Telur Ayam</li>
  <li>Mentega</li>
</ul>

Akan menjadi:

• Tepung Terigu
• Telur Ayam
• Mentega

Definition List

Berbeda dengan ordered & unordered list, definition list sedikit lebih kompleks. Seperti yang sedikit saya singgung di atas, definition list digunakan untuk menjelaskan istilah. Untuk menggunakan definition list, kita akan menggunakan tag <dl>, <dt>, dan <dd>.

<dl>

Untuk membuat definition list, kita membungkus item-item kita dengan tag <dl> dan </dl>, di dalam tag tersebut kita isi dengan istilah dan definisinya.

<dt>

Tag ini digunakan untuk membungkus istilah yang ingin kita jelaskan, dt merupakan singkatan dari definition term. Istilahnya kita letakkan di antara tag <dt> dan </dt>.

<dd>

Tag ini digunakan untuk membungkus penjelasan dari istilah yang kita tulis sebelumnya. Penjelasannya kita letakkan di antara tag <dd> dan </dd>.

<dl>
  <dt>Programmer</dt>
  <dd>Seseorang yang menulis, menguji, memperbaiki, dan memelihara suatu program komputer.</dd>
  <dt>Programming</dt>
  <dd>Proses menulis, menguji, memperbaiki, dan memelihara kode yang membangun suatu program komputer.</dd>
</dl>

Akan menjadi:

Programmer

Seseorang yang menulis, menguji, memperbaiki, dan memelihara suatu program komputer.

Programming

Proses menulis, menguji, memperbaiki, dan memelihara kode yang membangun suatu program komputer.

Nested List

Di HTML teman-teman bisa membuat list di dalam list, dan ini biasa disebut dengan nested list. Caranya teman-teman tinggal menggunakan tag <ul> atau <ol> di dalam tag <li> yang sebelumnya sudah dibuat.

<p>Menu</p>
<ul>
  <li>Makanan
    <ul>
      <li>Nasi Goreng</li>
      <li>Mie Rebus</li>
      <li>Mie Goreng</li>
    </ul>
  </li>
  <li>Minuman
    <ul>
      <li>Teh</li>
      <li>Kopi</li>
      <li>Susu</li>
    </ul>
  </li>
</ul>

Akan menjadi:

Menu

• Makanan
  • Nasi Goreng
  • Mie Rebus
  • Mie Goreng
• Minuman
  • Teh
  • Kopi
  • Susu

Kesimpulan

• Ada tiga jenis list pada HTML: ordered, unordered, dan definition
• Ordered list menggunakan nomor sebagai penanda itemnya
• Unordered list menggunakan bullet point sebagai penanda itemnya
• Definition list digunakan untuk menjelaskan suatu istilah
• Kita bisa membuat list bersarang pada HTML

Mungkin begitu saja untuk postingan kali ini, berikutnya kita akan membahas Tautan atau Link pada HTML. Jika teman-teman bingung dan punya pertanyaan silahkan tulis di kolom komentar di bawah ini. Terima Kasih.