Cara membuat nested list

Cara membuat nested list untuk membuat sebuah daftar dari artikel atau tulisan yang panjang dan mengharuskan penulis membuatnya agar artikel lebih enak untuk dibaca. Daftar / List HTML ini dibuat agar artikel lebih jelas menampilkan informasi mengenai sesuatu hal.

Cara membuat nested list

Ada 4 macam HTML list untuk mempercantik artikel anda, yaitu:

1. Unordered list — Dibuat untuk daftar tidak berurutan.
2. Ordered list — Dibuat untuk daftar berurutan.
3. Description list — Dibuat untuk menambah deskripsi.
4. Nested list — Dibuat untuk daftar berjenjang.

Di dalam list tersebut anda bisa memasukkan gambar, link atau pun hanya sekedar text biasa saja.

1. Unordered list

Unordered list dibuat dengan menggunakan element <ul> dan masing-masing itemnya menggunakan element <li>.

List item dalam Unordered list ditandai dengan bulatan hitam sebelum daftarnya, sebagai contoh:

<ul>
 	<li>Nasi Goreng</li>
 	<li>Nasi Uduk</li>
 	<li>Nasi Bebek</li>
</ul>

Hasilnya adalah daftar seperti di bawah ini:

• Nasi Goreng
• Nasi Uduk
• Nasi Bebek

Anda pun dapat mengubah bulatan dengan kotak, hanya menambahkan sedikit kode css list-style-type, sebagai contoh:

<li style="list-style-type: square;">Nasi Goreng</li>

Hasilnya akan seperti ini:

• Nasi Goreng
• Nasi Uduk
• Nasi Bebek

2. Ordered list

Ordered Lists dibuat dengan menggunakan element <ol> dan <li> sebagai daftar menunya. Biasanya ordered list dibuat berdasarkan prioritas, tapi itu pun tidak sepenuhnya benar. Jadi terserah penulis artikelnya masing-masing.

<ol>
 	<li>Nasi Goreng</li>
 	<li>Nasi Uduk</li>
 	<li>Nasi Bebek</li>
</ol>

Hasilnya seperti ini:

1. Nasi Goreng
2. Nasi Uduk
3. Nasi Bebek

3. Description list

Description list adalah sebuah daftar dengan penjelasan yang mendukung daftar tersebut. Description list dibuat dengan menggunakan element <dl> dan dilanjutkan dengan element <dt>. Untuk sebuah deskripsinya digunakan element <dd>. Contohnya:

<dl>
    <dt>Nasi Goreng</dt>
    <dd>Variasi: Ayam, Seafood, dan Kambing</dd>
    <dt>Nasi Uduk</dt>
    <dd>Variasi: Telur Rebus, Telur Dadar, dan Jengkol</dd>
</dl>

Hasilnya adalah sebagai berikut:

Nasi Goreng

Variasi: Ayam, Seafood, dan Kambing

Nasi Uduk

Variasi: Telur Rebus, Telur Dadar, dan Jengkol

4. Nested list

Nested list dibuat dengan kombinasi dari <ol> atau <ul> dengan tidak terburu-buru menutup dengan kode penutupnya seperti </ol> atau </ul>.

<ol>
 	<li>Makanan
    <ol>
 	<li>Nasi Goreng</li>
 	<li>Nasi Uduk</li>
 	<li>Nasi Bebek</li>
 	<li>dll</li>
    </ol>
        </li>
 	<li>Minuman
    <ol>
 	<li>Jus Mangga</li>
 	<li>Jus Jeruk</li>
 	<li>Jus Alpukat</li>
 	<li>dll</li>
   </ol>
       </li>
</ol>

Hasilnya sebagai berikut:

1. Makanan
   1. Nasi Goreng
   2. Nasi Uduk
   3. Nasi Bebek
   4. dll
2. Minuman
   1. Jus Mangga
   2. Jus Jeruk
   3. Jus Alpukat
   4. dll

Contoh daftar berjenjang di atas biasa disebut dengan nested list, dan anda bisa membuat variasi dengan menggunakan style, warna, font, atau pun link.

Nested list ini biasa digunakan untuk table of content atau daftar isi dari sebuah artikel, tapi untuk membuat daftar isi sangat tidak disarankan untuk membuatnya secara manual, lebih baik menggunakan plugin Table of Content yang banyak terdapat di repo wordpress.

Selamat Mencoba 🙂

• «
• Facebook
• Twitter
• Pin it
• ...
  • Google Plus
  • Digg
  • Reddit
  • Linkedin
  • Stumbleupon
  • Delicious
  • Email friend
• »