List item di gunakan untuk mengelompokkan data baik berurutan (ordered list) maupun yang tidak berurutan (unordered list).
Contoh: Kita mau mengelompokkan data-data berikut : Pisang, Jambu, Apel, Anggur dapat kita kelompokkan ke dalam kelompok: Buah-buahan.
5.1 Ordered List
Untuk membuat list terurut nomor (ordered list), kita gunakan tag pembuka <ol> dan penutup </ol>, sedangkan untuk mendata setiap itemnya menggunakan tag <li> sebagai pembuka dan </li> sebagai penutup.ol kependekan dari Ordered List, li kependekan dari List Item.
Contoh – Listing 5.1: orderedlist1.html
<html>
<head>
<title>Ordered List</title>
</head>
<body>
<p>Daftar Hari : </p>
<ol>
<li>Senin</li>
<li>Selasa</li>
<li>Rabu</li>
<li>Kamis</li>
<li>Jum'at</li>
<li>Sabtu</li>
<li>Minggu</li>
</ol>
<p>Daftar Kuliah : </p>
<ol>
<li>Web Design</li>
<li>Pemrograman web</li>
<li>Database </li>
</ol>
</body>
</html>
Nomor item ordered list secara default menggunakan angka 1,2,3,….dst.
Untuk keperluan tampilan tertentu kita dapat mengubah dengan mengubah atribut type pada tag <ol>.
Gambar 5.1. Contoh hasil list Atribut type pada tag <ol> :
Type Arti I Angka ditampilkan dengan angka romawi huruf besar
i Angka ditampilkan dengan angka romawi huruf kecil A Angka ditampilkan dengan abjad huruf besar
a Angka ditampilkan dengan abjad huruf kecil Contoh - Listing 5.2 : orderedlist2.html
<html>
<head>
<title>Ordered List</title>
</head>
<body>
<p>Daftar Hari : </p>
<ol type="A">
<li>Senin</li>
<li>Selasa</li>
<li>Rabu</li>
<li>Kamis</li>
<li>Jum'at</li>
<li>Sabtu</li>
<li>Minggu</li>
</ol>
<p>Daftar Kuliah : </p>
<ol type="i">
<li>Web Design</li>
<li>Pemrograman web</li>
<li>Database </li>
</ol>
</body>
</html>
Gambar 5.2. Contoh hasil list
5.2 Unordered List
Untuk membuat list tidak terurut nomor (Unordered List), kita gunakan tag pembuka <ul> dan penutup </ul>, sedangkan untuk mendata setiap itemnya menggunakan tag <li> sebagai pembuka dan </li> sebagai penutup.ul kependekan dari Unordered List, li kependekan dari List Item
Contoh – Listing 5.3 : unorderedlist1.html
<html>
<head>
<title>Unordered List</title>
</head>
<body>
<p>Daftar Hari : </p>
<ul>
<li>Senin</li>
<li>Selasa</li>
<li>Rabu</li>
<li>Kamis</li>
<li>Jum'at</li>
<li>Sabtu</li>
<li>Minggu</li>
</ul>
</body>
</html>
Gambar 5.3. Contoh hasil unordered list
Item unordered list secara default mengunakan noktah.Untuk keperluan tampilan tertentu kita dapat mengubah dengan mengubah atribut type pada tag <ul>.
Atribut type pada tag <ul> :
Type Arti Circle Bullet Lingkaran
Disc Bullet Titik
Square Bullet Kotak
Contoh – Listing 5.4: unorderedlist2.html
<html>
<head>
<title>Unordered List</title>
</head>
<body>
<p>Daftar Hari : </p>
<ul type="circle">
<li>Senin</li>
<li>Selasa</li>
<li>Rabu</li>
<li>Kamis</li>
<li>Jum'at</li>
<li>Sabtu</li>
<li>Minggu</li>
</ul>
</body>
</html>
Keterangan : unordered list dengan type = circle.
Gambar 5.4. Contoh hasil pengaturan bullet
5.3 Nested List
List item dapat digunakan secara bersarang, maksudnya di dalam list ada list item lagi.
Contoh – Listing 5.5 : nestedlist.html
<html>
<head>
<title>Nested List</title>
</head>
<body>
<ol>
<li>Buah</li>
<ul type="circle">
<li>Semangka</li>
<li>Jambu</li>
</ul>
<li>Bunga</li>
<ul type="disc">
<li>Melati</li>
<li>Anggrek</li>
</ul>
<li>Kendaraan</li>
<ul type="square">
<li>Mobil</li>
<li>Sepeda Motor </li>
</ul>
</ol>
</body>
</html>
Gambar 5.5. Contoh hasil nested list
5.4 Definition List
Definition List terdiri diapit oleh tag <DL> … </DL> dan <DT> tag menentukan definition term serta <DD> tag menentukan definition itu sendiri Contoh - Listing 5.6 : definitionlist.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<title>Definition List</title>
</head>
<body>
<h3>Contoh Definition List</h3>
<dl>
<dt>Web Design</dt>
<dd>Belajar HTML - Macromedia Dreamweaver</dd>
<dt>Pemrograman Web</dt>
<dd>Belajar PHP MySQL</dd>
</dl>
</body>
</html>
Gambar 5.6. Contoh hasil definition list
5.5 Tag-tag List HTML
Tag Awal Keterangan
<ol> Mendefinisikan Ordered List
<ul Mendefinisikan Unored List
<li> Mendefinisikan List Item
<dl> Mendefinisikan Definition List
<dt> Mendefinisikan Definition Term
<dd> Mendefinisikan Definition Description
5.6 Toolbar Dreamweaver untuk tag-tag list HTML
Gambar 5.6. Toolbar untuk tag list Keterangan – tab Text
• ul : Unordered List
• ol : Ordered List
• li : List Item
• dl : Definition List
• dt : Definition Term
• dd : Definition Description