Description list dan Nested List - Sesuai janji saya, kalau pada posting sebelumnya sudah dibahas bentuk html list jenis ordered list dan unordered list, sekarang kita lanjutkan kembali dengan html list jenis description list dan nested list.
Description list adalah daftar list dilengkapi dengan deskripsi atau uraian pada masing-masing list. Sangat berguna untuk membuat daftar list yang masing-masing itemnya membutuhkan penjelasan singkat. Sehingga tampak lebih rapi dan sedap dipandang mata.
Description list diletakkan di antara tag <dl>. Untuk item yang dijadikan daftar list masing-masing diletakkan di antara tag <dt>. Sedangkan untuk deskripsi masing-masing item menggunakan tag <dd>. Lebih jelasnya bisa disimak contoh berikut ini.
Hasilnya akan terlihat seperti di bawah ini :
Nested kalau kita terjemahkan ke dalam bahasa Indonesia artinya bersarang. Bersarang itu berarti masuk ke dalam sesuatu. Maka maksud dari Nested list adalah list yang bersarang dalam list. Kalau istilah dalam bahasa Jawanya itu list inside list. hehe..
Konco sinahu pasti sering melihat bentuk html list seperti ini. Karena biasa digunakan oleh para blogger untuk membuat horizontal menu. Perhatikan contoh berikut :
Hasilnya akan terlihat seperti di bawah ini :
Oke. Cukup sekian untuk belajar html yang bisa sinahu coding share kali ini. Jika ada pertanyaan bisa kita diskusikan bersama pada kolom komentar.
Apa itu Description List ?
Description list adalah daftar list dilengkapi dengan deskripsi atau uraian pada masing-masing list. Sangat berguna untuk membuat daftar list yang masing-masing itemnya membutuhkan penjelasan singkat. Sehingga tampak lebih rapi dan sedap dipandang mata.
Description list diletakkan di antara tag <dl>. Untuk item yang dijadikan daftar list masing-masing diletakkan di antara tag <dt>. Sedangkan untuk deskripsi masing-masing item menggunakan tag <dd>. Lebih jelasnya bisa disimak contoh berikut ini.
<!DOCTYPE html>
<html>
<body>
<h2>Contoh Description List</h2>
<br>
<dl>
<dt>Soda Gembira</dt>
<dd>- krim soda yang dibuat dengan cara mencampurkan minuman soda dengan pemanis (susu kental manis, sirup, atau kombinasi lainnya).</dd>
<dt>Milkshake</dt>
<dd>- minuman dingin dari campuran susu, es krim, dan sirop berperasa yang dikocok hingga berbusa.</dd>
</dl>
</body>
</html>
Hasilnya akan terlihat seperti di bawah ini :
Contoh Description List
- Soda Gembira
- - krim soda yang dibuat dengan cara mencampurkan minuman soda dengan pemanis (susu kental manis, sirup, atau kombinasi lainnya).
- Milkshake
- - minuman dingin dari campuran susu, es krim, dan sirop berperasa yang dikocok hingga berbusa.
Apa itu Nested List ?
Nested kalau kita terjemahkan ke dalam bahasa Indonesia artinya bersarang. Bersarang itu berarti masuk ke dalam sesuatu. Maka maksud dari Nested list adalah list yang bersarang dalam list. Kalau istilah dalam bahasa Jawanya itu list inside list. hehe..
Konco sinahu pasti sering melihat bentuk html list seperti ini. Karena biasa digunakan oleh para blogger untuk membuat horizontal menu. Perhatikan contoh berikut :
<!DOCTYPE html>
<html>
<body>
<h2>Contoh Nested List</h2>
<ul>
<li>Kopi
<ul>
<li>Kopi Hitam</li>
<li>Kopi Latte</li>
</ul>
<li>Teh
<ul>
<li>Teh Pucuk</li>
<li>Teh Japan</li>
</ul>
</li>
<li>Susu</li>
</ul>
</body>
</html>
Hasilnya akan terlihat seperti di bawah ini :
Contoh Nested List
- Kopi
- Kopi Hitam
- Kopi Latte
- Teh
- Teh Pucuk
- Teh Japan
- Susu
Oke. Cukup sekian untuk belajar html yang bisa sinahu coding share kali ini. Jika ada pertanyaan bisa kita diskusikan bersama pada kolom komentar.
0 Komentar untuk "Description list dan Nested List"