Daftar HTML

Daftar atau list dalam HTML terbagi menjadi dua, yang pertama disebut ordered list dan yang kedua disebut unordered list. Keduanya memiliki fungsinya masing-masing. Berikut contoh dari kedua macam list tersebut

    Ordered List

  1. Apel
  2. Durian
  3. Jeruk
  4. Mangga
  5. Melon

    Unordered List

  • Apel
  • Durian
  • Jeruk
  • Mangga
  • Melon

Daftar Berurutan (Ordered List)


Merupakan daftar atau list yang pengurutannya diwakili oleh angka, huruf, dan angka romawi. Secara default ordered list diurutkan berdasarkan angka.

<ol>
    <li>Apel</li>
    <li>Durian</li>
    <li>Jeruk</li>
    <li>Mangga</li>
    <li>Melon</li>
</ol>
  1. Apel
  2. Durian
  3. Jeruk
  4. Mangga
  5. Melon

Selain angka ordered list juga dapat diurutkan berdasarkan huruf dan angka romawi. Keduanya juga dapat ditampilkan secara uppercase dan lowercase.

Daftar dengan menggunakan huruf

    Upper Case

  1. Apel
  2. Durian
  3. Jeruk
  4. Mangga
  5. Melon

    Lower Case

  1. Apel
  2. Durian
  3. Jeruk
  4. Mangga
  5. Melon

Daftar dengan menggunakan angka romawi

    Upper Case

  1. Apel
  2. Durian
  3. Jeruk
  4. Mangga
  5. Melon

    Lower Case

  1. Apel
  2. Durian
  3. Jeruk
  4. Mangga
  5. Melon
Type Keterangan
<type=”1″> Item dari daftar diurutkan berdasarkan angka (default)
<type=”A”> Item dari daftar diurutkan berdasarkan huruf (Uppercase)
<type=”a”> Item dari daftar diurutkan berdasarkan huruf (Lowercase)
<type=”I”> Item dari daftar diurutkan berdasarkan angka romawi (Uppercase)
<type=”i”> Item dari daftar diurutkan berdasarkan angka romawi (Lowercase)

Menentukan Nilai Awal Urutan List


Dalam elemen <ol> nilai atribut type khusunya yang berbentuk angka dan angka romawi nilai awalnya bisa kita tentukan sendiri. Untuk menentukan nilai awal kita gunakan atribut start.

<ol start="10">
    <li>Apel</li>
    <li>Durian</li>
    <li>Jeruk</li>
    <li>Mangga</li>
    <li>Melon</li>
</ol>

    Upper Case

  1. Apel
  2. Durian
  3. Jeruk
  4. Mangga
  5. Melon
<ol type="I" start="10">
    <li>Apel</li>
    <li>Durian</li>
    <li>Jeruk</li>
    <li>Mangga</li>
    <li>Melon</li>
</ol>

<ol type="i" start="10">
    <li>Apel</li>
    <li>Durian</li>
    <li>Jeruk</li>
    <li>Mangga</li>
    <li>Melon</li>
</ol>

    Upper Case

  1. Apel
  2. Durian
  3. Jeruk
  4. Mangga
  5. Melon

    Lower Case

  1. Apel
  2. Durian
  3. Jeruk
  4. Mangga
  5. Melon

Daftar Tidak Berurutan (Unordered List)


Jika elemen <ol> menggunakan angka dan huruf untuk mengurutkan, berbeda dengan unordered list yang menggunakan tanda atau simbol atau bentuk. Contoh seperti di bawah ini.

<ul>
    <li>Apel</li>
    <li>Durian</li>
    <li>Jeruk</li>
    <li>Mangga</li>
    <li>Melon</li>
</ul>
  • Apel
  • Durian
  • Jeruk
  • Mangga
  • Melon

Sama seperti elemen <ol>, elemen <ul> juga mempunyai beberapa tipe. Tipe defaultnya merupakan bentuk lingkaran penuh kecil berwarna hitam atau dapat disebut juga pelor. Walaupun pada elemen <ul> dapat menggunakan atribut type sama seperti elemen <ol> namun cara ini tidak direkomendasikan dan sudah tidak didukung. Sebagai gantiya gunakan properti css dari global atribut style, yaitu list-style-type:” “.

    Disc

  • Apel
  • Durian
  • Jeruk
  • Mangga
  • Melon

    Circle

  • Apel
  • Durian
  • Jeruk
  • Mangga
  • Melon

    Square

  • Apel
  • Durian
  • Jeruk
  • Mangga
  • Melon

    None

  • Apel
  • Durian
  • Jeruk
  • Mangga
  • Melon
Type Keterangan
<style>=”list-style-type:disc;”> Item dari daftar diurutkan dengan diwakili bentuk pelor (default)
<style>=”list-style-type:circle;”> Item dari daftar diurutkan dengan diwakili bentuk lingkaran
<style>=”list-style-type:square;”> Item dari daftar diurutkan dengan diwakili bentuk persegi
<style>=”list-style-type:none;”> Item dari daftar diurutkan dengan tidak diwakili bentuk apapun

Daftar Bersarang


Daftar bersarang atau nested list merupakan keadaan dimana di dalam sebuah daftar terdapat daftar lagi. Contohnya dapat dilihat di bawah.

<ul>
    <li>Makanan
          <ul>
             <li>Nasi Campur</li>
             <li>Nasi Pecel</li>
             <li>Nasi Padang</li>
          </ul>
    </li>
    <li>Minuman
          <ul>
             <li>Teh</li>
             <li>Kopi</li>
             <li>Susu</li>
             <li>Air Putih</li>
          </ul>
    </li>
</ul>
  • Makanan
    • Nasi Campur
    • Nasi Padang
  • Minuman
    • Teh
    • Kopi
    • Susu
    • Air Putih

Daftar Deskripsi HTML


Selain menggunakan elemen <ol> dan <ul>. Dalam HTML juga diperkenalkan elemen daftar deskripsi. Daftar deskripsi merupakan daftar istilah atau nama yang mana setiap istilah tersebut memiliki deskripsinya masing-masing. Daftar deskripsi dimulai dengan tag <dl> yang merupakan list dari deskripsi, kemudian dilanjut dengan tag <dt> yang digunakan untuk mendefinisikan istilah atau nama dari yang ingin dijelaskan. Terakhir untuk menjelaskan atau mendeskripsikan istilah dalam tag <dt> maka gunakan tag <dd>. Contoh penerapannya bisa dilihat di sini.

<dl>
      <dt>Mie Pedas ★</dt>
      <dd>- Dengan 5 cabai</dd>
      <dt>Mie Pedas ★★</dt>
      <dd>- Dengan 10 cabai</dd>
      <dt>Mie Pedas ★★★</dt>
      <dd>- Dengan 15 cabai</dd>
      <dt>Mie Pedas ★★★★</dt>
      <dd>- Dengan 20 cabai</dd>
      <dt>Mie Pedas ★★★★★</dt>
      <dd>- Dengan 25 cabai</dd>
</dl>
Mie Pedas ★
- Dengan 5 cabai
Mie Pedas ★★
- Dengan 10 cabai
Mie Pedas ★★★
- Dengan 15 cabai
Mie Pedas ★★★★
- Dengan 20 cabai
Mie Pedas ★★★★★
- Dengan 25 cabai