Some text some message..
Some text some message..
Some text some message..
Some text some message..

Nested List (List Bersarang) Pada HTML

previous Previous Page

Sebuah item list dapat berisi sub-sub list anakan yang masih berada di dalam list utama. List ini sering disebut sebagai nested list (list bersarang). List ini akan memiliki satu atau lebih daftar yang berada di dalam daftar utama. Nested list dapat digunakan untuk menampilkan menu dengan berbagai sub-menu didalamnya. Selain itu dapat juga digunakan untuk menampilkan daftar isi yang berisi bab dengan sub-bab di dalamnya.

Pembuatan nested list dapat menggunakan list dengan nomor urut atau ordered list (<ol>), list dengan bulet atau un-ordered list (<ul>) ataupun gabungan dari keduanya. List bersarang jika menggunakan gabungan kedua jenis list tersebut biasanya dimulai dengan list jenis nomor urut lalu diikuti dengan list jenis bulet.

Nested list dengan <ol> (ordered list) :

Secara default, nested list yang menggunakan list jenis <ol> (ordered list) akan menampilkan daftar dengan nomor urut beserta sub-sub list yang berada didalamnya. Anda dapat memodifikasi atribut type untuk mendapatkan type penomoran yang lainnya misalnya dengan penomoran huruf latin, atau huruf romawi.

Berikut ini contoh list bersarang menggunakan <ol> (ordered list) :

HTML

1.  <!DOCTYPE html>
2.  <html>
3.  <head>
4.     <title>Nested List - UL</title>
5.  </head>
6.  <body>
7.     <h3>Nested list dengan unordered list (ul)</h3>
8.     <ul type="1">
9.       <li>Bagian yang <strong>pertama</strong>
10.         <ul type="a">
11.         <li>Sub-bagian yang <em>pertama</em></li>
12.         <li>Sub-bagian yang <em>kedua</em></li>
13.         <li>Sub-bagian yang <em>ketiga</em>
14.            <ul type="1">
15.              <li>Sub-Sub-bagian yang <u>pertama</u></li>
16.              <li>Sub-Sub-bagian yang <u>kedua</u></li>
17.            </ul>
18.         </li>
19.         <li>Sub-bagian yang <em>keempat</em></li>
20.         </ul>
21.      </li>
22.      <li>Bagian yang <strong>kedua</strong></li>
23.      <li>Bagian yang <strong>ketiga</strong>
24.         <ul type="a">
25.            <li>Sub-bagian yang <em>pertama</em></li>
26.            <li>Sub-bagian yang <em>kedua</em></li>
27.         </ul>
28.      </li>
29.      <li>Bagian yang <strong>keempat</strong></li>
30.    </ul>
31. </body>
32. </html>
33. 
34. 

Hasil dari script diatas seperti gambar berikut ini :

nested list

Nested list dengan <ul> (un-ordered list) :

Nested list yang menggunakan list jenis <ul> (un-ordered list) akan menampilkan daftar dalam bentuk bulet sebagai bentuk penanda listnya. Nested list jenis ini akan memberikan variasi tampilan jenis list yang berbeda tiap-tiap sub list. Jika list utamanya menggunakan jenis type "disc" (bulatan solid), maka sub list yang berada di dalamnya seharusnya memiliki jenis list yang berbeda misalnya type "square" (kotak) ataupun "circle" (lingkaran berlubang).

Berikut ini contoh list bersarang menggunakan jenis <ul> (un-ordered list) :

HTML

1.  <!DOCTYPE html>
2.  <html>
3.  <head>
4.     <title>Nested List - UL</title>
5.  </head>
6.  <body>
7.     <h3>Nested list dengan unordered list (ul)</h3>
8.     <ul>
9.       <li>Bagian yang <strong>pertama</strong>
10.         <ul>
11.         <li>Sub-bagian yang <em>pertama</em></li>
12.         <li>Sub-bagian yang <em>kedua</em></li>
13.         <li>Sub-bagian yang <em>ketiga</em>
14.            <ul>
15.              <li>Sub-Sub-bagian yang <u>pertama</u></li>
16.              <li>Sub-Sub-bagian yang <u>kedua</u></li>
17.            </ul>
18.         </li>
19.         <li>Sub-bagian yang <em>keempat</em></li>
20.         </ul>
21.      </li>
22.      <li>Bagian yang <strong>kedua</strong></li>
23.      <li>Bagian yang <strong>ketiga</strong>
24.         <ul>
25.            <li>Sub-bagian yang <em>pertama</em></li>
26.            <li>Sub-bagian yang <em>kedua</em></li>
27.         </ul>
28.      </li>
29.      <li>Bagian yang <strong>keempat</strong></li>
30.    </ul>
31. </body>
32. </html>
33. 
34. 

Jika dijalankan dibrowser, maka hasilnya seperti gambar di bawah ini :

nested list

noteCatatan : Nested list (list bersarang) sering digunakan pada menu navigasi website yang banyak memiliki sub-sub menu lain didalamnya. Cara ini merupakan cara untuk membuat kerangka website agar lebih terstruktur dengan hierarki yang lebih baik.

facebooktwittergoogle pluswhatapplinkedinpinterest

previous Previous Page

Daftar Isi HTML