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.
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 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 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 : 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 Contoh hasil list
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 : 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 : 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 Contoh hasil pengaturan bullet
Nested List
List item dapat digunakan secara bersarang, maksudnya di dalam list ada list item lagi.
Contoh – Listing : 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 Contoh hasil nested list
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 : 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 Contoh hasil definition list
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 |
Toolbar Dreamweaver untuk tag-tag list HTML
Gambar 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
