Banner HTML

Membuat Daftar Tersarang (Nested List) Di HTML

Di artikel Membuat Daftar Terurut Dan Tidak Terurut Di HTML, Anda dapat mempelajari bagaimana membuat daftar terurut (ordered list) dan tidak terurut (unordered list). Sebuah daftar terurut atau tidak terurut dapat terletak di daftar terurut atau  tidak terurut yang lain. Sebuah daftar (list) yang berada di daftar (list) yang lain disebut dengan daftar tersarang (nested list). Dalam pembuatannya, Anda tinggal mengulangi langkah pembuatan daftar terurut atau daftar tidak terurut untuk diletakkan di daftar terurut atau daftar tidak terurut yang lain. Untuk membuat daftar tersarang, elemen HTML yang digunakan tetap sama yaitu ul, ol dan li.

Berikut ini adalah contoh skrip HTML sederhana dimana daftar tersarang (nested list) adalah tidak terurut (unordered list):

<!DOCTYPE html>
<html>
<head>
<title>Membuat Daftar Tersarang (Nested List) Di HTML</title>
</head>
<body>
<p>Daftar minuman kesukaanku:</p>
<ul>
   <li>Kopi (coffee).</li>
   <ul>
      <li>Kopi putih (white coffee).</li>
      <li>Kopi hitam (black coffee).</li>
   </ul>
   <li>Teh (tea).</li>
   <ul>
      <li>Teh hijau (green tea).</li>
      <li>Teh hitam (black tea).</li>
   </ul>
   <li>Susu (milk).</li>
</ul>
</body>
</html>

Berikut ini adalah contoh skrip HTML sederhana dimana daftar tersarang (nested list) adalah terurut (ordered list):

<!DOCTYPE html>
<html>
<head>
<title>Membuat Daftar Tersarang (Nested List) Di HTML</title>
</head>
<body>
<p>Daftar minuman kesukaanku:</p>
<ul>
   <li>Kopi (coffee).</li>
   <ol>
      <li>Kopi putih (white coffee).</li>
      <li>Kopi hitam (black coffee).</li>
   </ol>
   <li>Teh (tea).</li>
   <ol>
      <li>Teh hijau (green tea).</li>
      <li>Teh hitam (black tea).</li>
   </ol>
   <li>Susu (milk).</li>
</ul>
</body>
</html>

Untuk memperbaiki mutu konten, Anda dapat berpartisipasi dengan cara melaporkan apabila menemukan kesalahan ketik, kata-kata rangkap, redaksi kurang pas (jelas), gambar pendukung tidak ada dan sebagainya melalui form Kontak Kami untuk mendapatkan perbaikan. Terima kasih atas kerjasamanya.

Hindro HindriantoHindro adalah pendiri sekaligus admin termasmedia.com dan topikit.com, blog online yang mengulas teknologi informasi. Dunia web mulai ditekuni tahun 2012 dengan mempelajari CMS Joomla dan Wordpress. Beberapa buku yang sekarang dipelajari antara lain PHP, HTML5, ASP.NET 4.5, JavaScript, CSS3, MySQL, Adobe Dreamweaver, Adobe Photoshop dan Adobe Flash.