Cara membuat nested list

61 views

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.

Niagahoster dan Contabo merupakan salah satu penyedia jasa layanan hosting/VPS terbaik dengan teknologi wordpress accelerator.

Cara membuat nested list

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.

bukalapak banner
<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 🙂

Daftar Layanan Hosting Terbaik
Target Audien Provider Harga Mulai Dari
USA Contabo £ 2.99
Eropa Contabo £ 2.99
Indonesia Niagahoster Indonesia Rp. 8.000,00
Exabytes Indonesia Rp. 10.000,00
Hostinger Indonesia Rp. 8.000,00
Domainesia Rp. 8.000,00
Cloudmild Rp. 8.000,00

Leave a reply "Cara membuat nested list"

Author: 
Harry
Nama saya Harry. Ini merupakan blog pribadi. Isi utamanya tentang belajar wordpress dari nol sampai lupa lagi, karena keseringan lupa, akhirnya yang pernah lupa dituangkan dalam blog sederhana. Terkadang di waktu luang, saya menulis tentang apa yang ingin saya tulis. Jadi jangan heran pada akhirnya blog ini jadi gado-gado.