HTML : List

HTML

Mengenal List HTML

List HTML digunakan untuk menyajikan daftar informasi dengan cara yang baik dan semantik (berkaitan). Ada tiga jenis daftar dalam HTML dan masing-masing memiliki tujuan dan makna tertentu:

  • Unordered list – Metode mengurutkan daftar dengan menggunakan simbol atau special character pada html .
  • Ordered list – Metode mengurutkan daftar dengan menggunakan angka, abjad dan angka romawi pada html.
  • Description list – Merupakan jenis daftar yang ditujukan untuk membuat struktur yang berisi deskripsi atau daftar penjelasan.

Catatan: Di dalam daftar item kalian dapat meletakkan teks, jeda baris, gambar, tautan, dll. Kalian juga dapat menempatkan seluruh daftar di dalam daftar item untuk membuat daftar bersarang.

HTML Unordered List

Daftar tidak berurutan yang dibuat menggunakan tag <ul>, dan setiap daftar item dimulai dengan tag <li>. Daftar item dalam daftar tidak berurutan secara default akan ditandai dengan bullet (lingkaran hitam kecil). Berikut contoh kode nya:

<ul>
    <li>Chocolate Cake</li>
    <li>Black Forest Cake</li>
    <li>Pineapple Cake</li>
</ul>

Output dari kode tersebut akan muncul seperti di bawah ini.

  • Chocolate Cake
  • Black Forest Cake
  • Pineapple Cake

HTML Ordered List

Order list dibuat menggunakan tag <ol>, dan setiap daftar item dimulai dengan tag <li>. Daftar yang diurutkan berisi informasi di mana daftar tersebut ditandai dengan angka, huruf atau abjad romawi. Berikut contoh kodenya:

<ol>
    <li>Mix ingredients</li>
    <li>Bake in oven for an hour</li>
    <li>Allow to stand for ten minutes</li>
</ol>

Output dari kode tersebut akan muncul seperti di bawah ini.

  1. Mix ingredients
  2. Bake in oven for an hour
  3. Allow to stand for ten minutes

HTML Definition Lists

Definition List adalah daftar item dengan mendefinisikan setiap item yang ada.

Definition List dibuat menggunakan tag <dl>. Tag <dl> digunakan bersama dengan <dt> – yang mendefinisikan item dalam daftar tersebut, dan <dd> menjelaskan item dalam daftar tersebut, berikut contoh kodenya:

<dl>
    <dt>Bread</dt>
    <dd>A baked food made of flour.</dd>
    <dt>Coffee</dt>
    <dd>A drink made from roasted coffee beans.</dd>
</dl>

Output dari kode tersebut akan muncul seperti di bawah ini.