List HTML merupakan bentuk yang umum yang biasa kita gunakan untuk menguraikan suatu daftar dalam dokumen HTML. List HTML yang paling umum digunakan adalah Ordered List dan Unordered List. Jenis-jenis list dalam HTML adalah sebagai berikut :
- HTML Unordered List
- HTML Ordered List
- HTML Definition List
1. HTML Unordered List
Unordered list dimulai dengan tag <ul>. Setiap list item dimulai dengan tag <li>. List item ditandai dengan bullets (lingkaran hitam kecil).
Cara membuat unordered list dalam dokumen HTML :
| <html> <body> <h4>Contoh Unordered List:</h4> <ul> <li>Kopi</li> <li>Teh</li> <li>Susu</li> </ul> </body> </html> |
Preview kode html diatas dalam sebuah browser web :
2. HTML Ordered List
Ordered list dimulai dengan tag <ol>. Setiap list item dimulai dengan tag <li>. Daftar item ditandai dengan angka.
Cara membuat ordered list, dalam sebuah dokumen HTML :
| <html> <body> <h4>Contoh Ordered List:</h4> <ol> <li>Apel</li> <li>Anggur</li> <li>Strawbery</li> </ol> </body> </html> |
Preview kode html diatas dalam sebuah browser web :
3. HTML Definition List
Sebuah definition list adalah list item, dengan deskripsi dari setiap item. Tag <dl> mendefinisikan definition list. Tag <dl> digunakan dalam hubungannya dengan <dt> (mendefinisikan item dalam list) dan <dd> (menjelaskan item dalam list).
Cara membuat definition list, dalam sebuah dokumen HTML :
| <html> <body> <h4> Contoh Definition List :</h4> <dl> <dt>Makanan</dt> <dd>- Nasi Goreng</dd> <dt>Minuman</dt> <dd>- Es teh manis</dd> </dl> </body </html> |
Preview kode html diatas dalam sebuah browser web :
4. Nested List
Sebuah list dapat digunakan secara bersarang (nested list), maksudnya didalam list ada list lagi.
Cara membuat nested list, dalam sebuah dokumen HTML :
| <html> <body> <h4>Contoh Nested List</h4> <ol> <li>Nama Buah</li> <ul> <li>Apel</li> <li>Anggur</li> <li>Jeruk</li> <li>Strawbery</li> </ul> <li>Nama Minuman</li> <ul> <li>Kopi</li> <li>Tea</li> <ul> <li>Ice Tea</li> <li>Green Tea</li> </ul> <li>Susu</li> </ol> </body> </html> |
Preview kode html diatas dalam sebuah browser web :
0 comments:
Post a Comment