1. List
Dalam pembuatan sebuah dokumen, list (daftar) merupakan sebuah hal yang tidak dapat
dihindari. Daftar mengenai berbagai hal selalu dapat ditemukan dalam penulisan dokumen.
Resep masakan memiliki daftar bahan yang diperlukan, serta langkah-langkah memasak yang
harus diikuti. Penunjuk jalan memiliki daftar tempat yang dapat dituju, sesuai dengan arah yang
akan diambil. Seorang mahasiswa yang ingin memilih mata kuliah akan dihadapkan dengan
daftar mata kuliah. Banyaknya kegunaan daftar ini menjadikan HTML memberikan sekumpulan
elemen khusus untuk membuat daftar.
Terdapat tiga daftar utama yang dapat dibuat dengan HTML, yaitu:
1. Unordered List (Daftar Tidak Terurut), seperti namanya, memungkinkan kita untuk
membuat daftar dari hal-hal yang tidak memiliki urutan tertentu.
2. Ordered List (Daftar Terurut), kembali lagi, sesuai namanya, memberikan kita fasilitas
untuk membuat daftar hal-hal yang harus diurutkan dengan benar.
3. Definition List (Daftar Definisi), digunakan untuk membuat daftar definisi dari istilahistilah yang ada dalam dokumen, digunakan terutama untuk glosarium dan indeks.
Pemilihan list yang akan digunakan sendiri tentunya tergantung kepada konten yang akan ditulis,
serta makna semantik yang diinginkan.
Bagian ini akan membahas bagaimana menggunakan elemen-elemen list pada HTML, serta cara
untuk memperindah tampilan list dengan menggunakan CSS.
Unordered List
Seperti yang telah dijelaskan sebelumnya, unordered list digunakan untuk memberikan daftar
dari hal-hal yang tidak memiliki urutan tertentu, atau yang urutannya tidak penting. Pembuatan
unordered list dilakukan dengan menggunakan elemen ul (unordered list), yang merupakan
sebuah block level element. Untuk mengisikan daftar, kita dapat menggunakan elemen li (list
item), seperti pada kode di bawah:
<ul>
<li>Windows 8</li>
<li>Microsoft Office 2013</li>
<li>Visual Studio 2012</li>
</ul>
dan hasilnya adalah sebagai berikut:

2. Unordered List Sederhana
Mengubah Tampilan Unordered List
Seperti yang dapat dilihat pada gambar Unordered List Sederhana, secara standar browser akan
menampilkan titik bulat berwarna hitam sebagai penanda daftar. Tentunya kita dapat mengubah
hal ini, dengan menggunakan properti CSS list-style-type, seperti berikut:
li {
list-style-type: square;
}
maka kita akan mendapatkan hasil:
Unordered List dengan Penanda Kotak
Nilai-nilai dari list-style-type yang dapat diisikan untuk unordered list yaitu disc, circle,
dan square.
Jenis-jenis Penanda Unordered List
Selain itu, kita juga dapat menghilangkan penanda dengan memberikan nilai none pada properti
list-style-type:
li {
list-style-type: none;
}

3. sehingga akan menghasilkan:
List Tanpa Penanda
Kita bahkan juga dapat menggunakan gambar yang kita inginkan sebagai penanda dari list,
melalui properti list-style-image:
li {
list-style-image: url('images/list-style.png');
}
dengan hasil:
List dengan Penanda Gambar
Terakhir, dengan memanfaatkan nilai none pada list-stype-type dan pseudo-selector
:before, kita juga dapat membuat penanda daftar dengan karakter apapun yang kita inginkan,
seperti berikut:
li {
list-style-type: none;
}
li:before {
content: "-";
margin-right: 5px;
}
hasilnya:

4. List dengan Penanda Karakter Bebas
Ordered List
Seperti namanya, ordered list membuat daftar yang terurut. Elemen untuk pembuatan ordered list
yaitu ol (ordered llist), dan isi dari list sendiri dibuat dengan menggunakan elemen li, sama
seperti pada unordered lsit. Secara standar ordered list akan menggunakan angka sebagai
penanda daftar:
<ol>
Ordered List
<li>Windows 8</li>
<li>Microsoft Office 2013</li>
<li>Visual Studio 2012</li>
</ol>
hasil eksekusi kode di atas adalah:
List Terurut Sederhana
Nilai awal memulai perhitungan sendiri dapat diubah dengan menggunakan atribut start,
sehingga kode berikut:
<ol start="10">
Ordered list:
<li>Windows 8</li>
<li>Microsoft Office 2013</li>
<li>Visual Studio 2012</li>
</ol>
akan menghasilkan:
List Terurut Mulai dari 10

5. selain itu, kita juga dapat mengubah urutan nilai menjadi terbalik (dari besar ke kecil) dengan
menggunakan atribut reversed seperti berikut:
<ol start="10" reversed="reversed">
Ordered list:
<li>Windows 8</li>
<li>Microsoft Office 2013</li>
<li>Visual Studio 2012</li>
</ol>
sehingga list akan ditampilkan terurut menurun:
List Terurut Menurun
Perlu diingat bahwa atribut start dan reverse belum didukung oleh semua browser. Jadi,
pastikan anda mengujikan kode pada kelima browser populer jika ingin menggunakan kedua
atribut ini.
Selanjutnya, jika ingin mengubah urutan perhitungan pada pertengahan daftar, kita dapat
menambahkan atribut value pada elemen li. Atribut value akan mengubah perhitungan, dan
elemen-elemen li setelahnya akan dihitung ulang sesuai dengan nilai yang diberikan. Kode:
<ol>
Ordered list:
<li>Windows 8</li>
<li>Microsoft Office 2013</li>
<li value="30">Visual Studio 2012</li>
<li>Expression Studio</li>
<li value="10">Microsoft SQL Server 2008 R2</li>
<li>Windows Phone 8</li>
</ol>
akan menghasilkan tampilan:

6. Perubahan Nilai Urutan List
Mengubah Tampilan Ordered List
Sama seperti unordered list, kita juga dapat mengubah penanda daftar agar tidak menggunakan
angka desimal saja. Pengubahan penanda juga menggunakan properti list-style-type, sama
seperti pada unordered list. Adapun nilai-nilai yang dapat digunakan untuk mengubah penanda
pada ordered list yaitu: decimal, lower-roman, lower-greek, upper-alpha, upper-latin,
georgian, decimal-leading-zero, upper-roman, lower-alpha, lower-latin, dan armenian.
Jenis-jenis Penanda Ordered List
Posisi Teks List (Ordered dan Unordered)
Ketika menuliskan sebuah daftar, tidak jarang kita menemukan daftar panjang, yang diikuti
dengan deskripsi mengenai daftar tersebut, seperti yang dapat dilihat pada gambar di bawah:
Posisi Teks Standar
dapat dilihat bagaimana teks pada baris baru akan secara otomatis bergeser sedikit ke kanan, agar
menjadi sejajar dengan titik mulai teks pada daftar. Kita dapat mengubah posisi teks ini dengan
menggunakan properti list-style-position.

7. Properti list-style-position memiliki dua nilai utama, yaitu outside dan inside. Nilai
outside merupakan nilai standar, di mana teks berada pada “luar” dari penanda daftar, dan nilai
inside akan menjadikan posisi teks pada baris baru sejajar dengan penanda daftar.
Posisi Teks “Inside”
Penggabungan Properti List
Seperti banyak properti lainnya, properti list-style-* dapat dituliskan dengan singkat,
menjadi hanya list-style saja. Sintaks penulisan singkat properti ini ialah sebagai berikut:
ul {
list-style: list-style-type list-style-position list-style-image;
}
Definition List
Selain daftar terurut dan tidak terurut, kita juga seringkali menjumpai daftar definisi, yang
memberikan kita penjelasan singkat terhadap sebuah kata atau istilah yang mungkin tidak kita
ketahui. Dalam dunia menulis, daftar ini dikenal dengan nama glosarium.
Membuat glosarium dalam HTML dilakukan dengan menggunakan elemen dl (definition list),
dan kemudian alih-alih menggunakan li untuk mengisikan daftar, kita menggunakan dua elemen
lain, yaitu dt (definition term - istilah yang akan didefinisikan) dan dd (definition description penjelasan dari istilah).
Perhatikan contoh pembuatan sebuah definition list berikut:
<dl>
<dt>study</dt>
<dd>the devotion of time and attention to acquiring knowledge on an academic
subject, esp. by means of books</dd>
<dt>design</dt>
<dd>a plan or drawing produced to show the look and function or workings of a
building, garment, or other object before it is built or made</dd>
<dd>purpose, planning, or intention that exists or is thought to exist behind
an action, fact, or material object</dd>
<dt>business</dt>
<dt>work</dt>

8. <dd>a person's regular occupation, profession, or trade</dd>
</dl>
kode di atas akan menghasilkan:
Contoh Definition List
dan tentunya kita dapat mengubah tampilan dari definition list dengan menggunakan CSS,
seperti kita mengubah tampilan elemen-elemen lainnya. Perhatikan juga bahwa tidak terdapat
elemen khusus untuk mengatur definition list, bertolak belakang dengan adanya list-style
untuk ordered maupun unordered list.
Nested List
Salah satu fitur list yang paling menarik dari HTML ialah kemampuan untuk membangun list di
dalam list. Sebuah ordered list dapat dituliskan kembali di dalam unordered list, yang keduanya
berada di dalam definiton list, ataupun sebaliknya. Sama sekali tidak ada batasan dalam
menuliskan list di dalam lsit, selain permasalahan makna semantik tentunya.
Menuliskan kode untuk list di dalam list juga sangat sederhana, dengan langsung memasukkan
list yang ingin ditambahkan ke dalam elemen li, seperti berikut:
<ol>
<li> HTML dan CSS Dasar
<ul>
<li>
Elemen, Tag, dan Atribut
<ol>
<li>Elemen</li>
<li>Tag</li>
<li>Atribut</li>
</ol>
</li>
<li>Struktur Dokumen HTML</li>
<li>
Dasar CSS
<ol>
<li>Selector</li>
<li>Property</li>
<li>Value</li>
<li>Sintaks CSS</li>
</ol>
</li>
<li>Mengimplementasikan CSS pada HTML</li>

9. </ul>
</li>
</ol>
Maka kita akan mendapatkan hasil seperti berikut:
Contoh Nested List