Membuat Suatu Daftar Urutan atau List pada HTML

Contoh
Memo Hari Ini
Yang harus dilakukan :
•    Bayar tagihan listrik
•    Nganterin Ayah ke bandara
•    Beli lampu neon buat di taman
•    Ambil cucian di laundry
•    Nelpon Mirza
Diatas adalah contoh dari daftar atau list yang dapat dibuat di HTML. List tersebut dapat kalian buat dengan mudah menggunakan tag yang sesuai yaitu tag <ul>, <ol>, dan <li>.
Dalam membuat suatu list maka sebaiknya kalian bertanya dulu ke diri kalian, apakah list yang akan kalian buat itu harus berurutan atau tidak. Jika jawabannya adalah berurutan maka kalian sebaiknya memakai tag <ol>, namun apabila list yang akan dibuat tidak harus berurutan seperti contoh diatas maka kalian sebaiknya memakai tag <ul>. Tag <li> digunakan untuk membuat detail dari list tersebut.
Tag <ol> adalah kependekan dari Ordered List, yang artinya list secara berurutan. List yang ditampilkan nanti oleh tag ini akan menampilkan nomor disebelah kiri dari detail. Lihat contoh dibawah ini:
Memo Hari Ini
Yang harus dilakukan :
1.    Nelpon Mirza
2.    Bayar tagihan listrik
3.    Ambil cucian di laundry
4.    Nganterin Ayah ke bandara
5.    Beli lampu neon buat di taman
Contoh diatas adalah versi berurutan dari memo yang ditulis pada contoh sebelumnya. Perhatikan bahwa sekarang list yang ada menggunakan nomor urut untuk menentukan prioritas yang harus dikerjakan. Nomor urut ini tampil karena ia menggunakan tag <ol>. Inilah perintah HTML untuk menampilkan list tersebut.
view plaincopy to clipboardprint?
1.    <ol> 
2.        <li>Nelpon Mirza</li>     
3.        <li>Bayar tagihan listrik</li> 
4.        <li>Ambil cucian di laundry</li> 
5.        <li>Nganterin Ayah ke bandara</li> 
6.        <li>Beli lampu neon buat di taman</li> 
7.    </ol>  
Kalian dapat melihat disini penggunaan <ol> dan <li> , dimana <ol> digunakan untuk memberi petunjuk kepada browser bahwa list yang ditampilkan harus menggunakan nomor urut, dan <li> digunakan untuk membuat detail dari list. Mudah bukan?
Sekarang kalian pasti dapat menebak contoh penggunaan Unordered List, atau list secara tidak berurut, persis seperti pada contoh pertama. Yap, perintahnya sama dengan Ordered List namun tag <ol> diganti dengan <ul>. Lihat contoh berikut:
view plaincopy to clipboardprint?
1.    <ul> 
2.        <li>Bayar tagihan listrik</li> 
3.        <li>Nganterin Ayah ke bandara</li> 
4.        <li>Beli lampu neon buat di taman</li> 
5.        <li>Ambil cucian di laundry</li> 
6.        <li>Nelpon Mirza</li>     
7.    </ul> 
Sangat mudah! kalian dapat mencobanya di papan tulis pada bagian bawah halaman ini.
Ada satu lagi jenis list dalam HTML namun pemakaiannya sangat jarang sekali di luar sana. List itu adalah Definition List. List ini digunakan untuk menampilkan suatu daftar istilah-istilah berikut penjelasannya. Contohnya adalah seperti ini:
Obeng
Perkakas yang digunakan untuk memutar suatu skrup
Stop Kontak
Suatu panel yang digunakan sebagai sumber listrik
Mur
Pasangannya baut, digunakan untuk menjepit sesuatu, bagian laki-lakinya
Baut
Pasangannya Mur, digunakan untuk menjepit sesuatu, bagian perempuannya

Perhatikan bahwa tiap istilah berada di sebelah kiri dan penjelasannya berada di bawahnya dengan agak menjorok ke kanan. Inilah yang disebut dengan Definition List. Untuk membuatnya kita akan membutuhkan,
•    <dl> untuk membuat suatu Definition List
•    <dt> untuk menampilkan suatu istilah, kependekan dari Definition Term
•    <dd> untuk menampilkan penjelasan dari istilah sebelumnya, kependekan dari Definition Description
Penggunaan dari tag-tag diatas adalah seperti ini:
view plaincopy to clipboardprint?
1.    <dl> 
2.        <dt>Obeng</dt> 
3.            <dd>Perkakas yang digunakan untuk memutar suatu skrup</dd>    
4.        <dt>Stop Kontak</dt> 
5.            <dd>Suatu panel yang digunakan sebagai sumber listrik</dd> 
6.        <dt>Mur</dt> 
7.            <dd>Pasangannya baut, digunakan untuk menjepit sesuatu, bagian laki-lakinya</dd> 
8.        <dt>Baut</dt> 
9.            <dd>Pasangannya Mur, digunakan untuk menjepit sesuatu, bagian   
10.    perempuannya</dd> 
11.    </dl> 
Kalian dapat mencobanya di papan tulis yang disediakan di bagian bawah halaman ini.
    <body>

01.<ol> 
02.    <li>Nelpon Mirza</li>     
03.    <li>Bayar tagihan listrik</li> 
04.    <li>Ambil cucian di laundry</li> 
05.    <li>Nganterin Ayah ke bandara</li> 
06.    <li>Beli lampu neon buat di taman</li> 
07.</ol>
    </body>
</html>