HTML

#09: Membuat List (Daftar) Menggunakan HTML

Mandan Koding3 September 202212

Ada kalanya kita membutuhkan penggunaan daftar dalam suatu dokumen HTML. List dapat ditulis secara terurut ataupun tidak terurut. Pada tutorial kali ini kita akan membahas penggunaan list tersebut.

Jenis List pada HTML dibedakan menjadi Tiga yaitu:

List Terurut
List Tidak Terurut
Definiton List

List/ Daftar Terurut (Ordered List)

List terurut biasanya ditandai dengan angka (1, 2, 3) maupun alphabet tertentu (a, b, c, dst, atau i,ii,iii, dst). Daftar terurut seperti ini umumya digunakan untuk menuliskan langkah-langkah yang tidak bisa dilakukan secara acak. Contoh daftar terurut adalah sebagai berikut:

Sub Bab yang Terdapat di Dalam Bab 1:

1.1	Latar Belakang Masalah
1.2	Identifikasi Masalah
1.3	Batasan Masalah
1.4	Perumusan Masalah
1.5	Tujuan Penelitian
1.6	Manfaat Penelitian
1.7	Relevansi

Pada contoh di atas, kita harus menuliskan sub bab secara berurutan. Kita tidak bisa meletakkan latar belakang pada akhir ataupun di tengah-tengah daftar. Penulisan daftar seperti ini mutlak dan tidak bisa dirubah-rubah.

Untuk membuat daftar terurut kita membutuhkan tag berpasangan yang bernama ordered list.

<ol> </ol>

Tag di atas merupakan pembungkus untuk membuat daftar terurut, sedangkan untuk item daftarnya sendiri kita menggunakan tag berpasangan yang bernama list item.

<li> </li>

Tag list itemlah yang akan disisipkan ke dalam tag ordered list. Berikut struktur dasar penggunaanya:

<ol>
    <li> list item </li>
</ol>

Adapun contoh sederhana penggunaan tag terurut adalah sebagai berikut:

Nama File: list-terurut.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Daftar Terurut</title>
</head>
<body>

	<h1>DEMO MEMBUAT LIST (DAFTAR) TERURUT</h1>

	<b><u>Sub Bab yang Terdapat di Dalam Bab 1:</u></b>

	<ol>
		<li>Latar Belakang Masalah</li>
		<li>Identifikasi Masalah</li>
		<li>Batasan Masalah</li>
		<li>Perumusan Masalah</li>
		<li>Tujuan Penelitian</li>
		<li>Manfaat Penelitian</li>
		<li>Relevansi</li>
	</ol>

</body>
</html>

Hasilnya:

Dalam keadaan default, penggunaan tag ordered list akan menghasilkan angka (1, 2, 3, dst). Meskipun begitu, kita bisa mengganti nomor di atas sesuai dengan kebutuhan yang kita inginkan, misalkan kita ingin mengubah angka menjadi huruf (a, b, c, dst) kita bisa menggunakan atribut ordered list yang bernama type. Adapun nilai yang terdapat di dalam atribut type adalah:

type= “A” : Membuat daftar dengan penomoran A
type= “a” : Membuat daftar dengan penomoran a
type= “I” : Membuat daftar dengan penomoran I
type= “i” : Membuat daftar dengan penomoran i

Berikut contoh penggunaan nilai atribut di atas:

Nama File: type-list-terurut.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Type Daftar Terurut</title>
</head>
<body>
	<h1>DEMO MENGGUNAKAN ATRIBUT TYPE DAFTAR TERURUT</h1>

	<p><b>Type A, B, C</b></p>
	<ol type="A">
		<li>Latar Belakang Masalah</li>
		<li>Identifikasi Masalah</li>
		<li>Batasan Masalah</li>
	</ol>

	<p><b>Type a, b, c</b></p>
	<ol type="a">
		<li>Latar Belakang Masalah</li>
		<li>Identifikasi Masalah</li>
		<li>Batasan Masalah</li>
	</ol>

	<p><b>Type I, II, III</b></p>
	<ol type="I">
		<li>Latar Belakang Masalah</li>
		<li>Identifikasi Masalah</li>
		<li>Batasan Masalah</li>
	</ol>

	<p><b>Type i, i, iii</b></p>
	<ol type="i">
		<li>Latar Belakang Masalah</li>
		<li>Identifikasi Masalah</li>
		<li>Batasan Masalah</li>
	</ol>

</body>
</html>

Hasilnya:

Tutorial HTML Sebelumnnya:

List / Daftar Tidak Terurut (Unordered List)

List tidak terurut merupakan kebalikan dari list terurut. kita dapat menempatkan list itemnya secara acak tanpa memperdulikan urutan tertentu. Untuk pembuatan list tidak terurut kita menggunakan tag berpasangan yang bernama unordered list:

<ul> </ul>

Tag unordered list merupakan pembungkus untuk daftar list tidak terurut, sedangkan untuk pendefinisisan itemnya kita menggunakan tag berpasangan yang bernama list item

<li> </li>

Tag list itemlah yang akan disisipkan ke dalam tag unordered list. Berikut struktur dasar penggunaanya:

<ul>
	<li> list item </li>
</ul>

Adapun contoh sederhana penggunaan tag tidak terurut adalah sebagai berikut:

Nama File: list-tidak-terurut.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Daftar Tidak Terurut</title>
</head>
<body>

	<h1>DEMO MEMBUAT LIST (DAFTAR) TIDAK TERURUT</h1>

	<b><u>Perlengkapan yang dibutuhkan untuk berangkat ke sekolah</u></b>

	<ul>
		<li>Baju Seragam</li>
		<li>Tas</li>
		<li>Sepatu</li>
		<li>Buku</li>
		<li>Pensil</li>
		<li>Penghapus</li>
	</ul>

</body>
</html>

Hasilnya:

Pada list di atas kita tidak diwajibkan menuliskan kebutuhan di atas secara berurutan sesuai dengan ketentuan. Akan tetapi kita bisa saja menuliskannya secara acak. Hasil di atas dalam keadaan default akan menampilkan tanda bulat pada list item. Kita bisa saja merubah list item tersebut dengan menggunakan atribut unordered list yang bernama type.

type =”disk” 	: List seperti gambar bulat yang diarsir
type=”circle”	: List seperti gambar bulat yang tidak diarsir
type=”square”	: List seperti gambar kotak

Berikut contoh penggunaan nilai atribut di atas:

Nama File: type-list-tidak-terurut.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Type Daftar Tidak Terurut</title>
</head>
<body>

<h1>DEMO MEMBUAT LIST (DAFTAR) TIDAK TERURUT MENGGUNAKAN ATRIBUT TYPE</h1>

<b><u>Perlengkapan yang dibutuhkan untuk berangkat ke sekolah</u></b>

<p><b>Menggunakan Type Disk:</b></p>
<ul type="disk">
	<li>Baju Seragam</li>
	<li>Tas</li>
	<li>Sepatu</li>
	<li>Buku</li>
	<li>Pensil</li>
	<li>Penghapus</li>
</ul>

<p><b>Menggunakan Type Circle:</b></p>
<ul type="circle">
	<li>Baju Seragam</li>
	<li>Tas</li>
	<li>Sepatu</li>
	<li>Buku</li>
	<li>Pensil</li>
	<li>Penghapus</li>
</ul>

<p><b>Menggunakan Type Square:</b></p>
<ul type="square">
	<li>Baju Seragam</li>
	<li>Tas</li>
	<li>Sepatu</li>
	<li>Buku</li>
	<li>Pensil</li>
	<li>Penghapus</li>
</ul>

</body>
</html>

Hasilnya:

Definition List:

Definition list merupakan jenis daftar yang sudah didefinisikan oleh HTML (predefined). Untuk membuat daftar ini, kita menggunakan tag berpasangan.

<dl> </dl>

Tag di atas merupakan pembungkus untuk membuat definition list. Sedangkan untuk membuat item di dalamnya kita tidak menggunakan tag item list lagi, akan tetapi kita menggunakan tag berpasangan.

<dt> </dt>

Jika tag item di atas memiliki sub-item lagi, kita bisa menggunakan tag berpasangan.

<dd> </dd>

Berikut contoh sederhana penggunaan kode di atas:

Nama File: definition-list.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Definition List</title>
</head>
<body>

<h1>DEMO MEMBUAT DEFINITION LIST</h1>

<dl>
	<dt><b>Jomblo</b></dt>
		<dd>Merupakan keadaan dimana seseorang masih sendiri dan belum menemukan pendamping hidup</dd>

	<dt><b>Menikah</b></dt>
		<dd>Merupakan keadaan dimana seseorang telah menemukan pendamping hidup dan menjalani hubungan rumah tangga yang sakinah, mawaddah, dan waraohmah</dd>
	
</dl>

</body>
</html>

Hasilnya:

Nested List (Daftar Bersarang)

List bersarang yaitu item yang terdapat di dalam list memiliki daftar lagi (sub-item). Penggunaannya yaitu dengan menyertakan tag ordered atau unordered list di dalam item yang bersangkutan. Sebagai contoh, perhatikan kode di bawah ini:

Nama File: list-bersarang.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Daftar Bersarang</title>
</head>
<body>

<h1>DEMO MEMBUAT NESTED LIST (DAFTAR BERSARANG)</h1>

<b><u>DAFTAR MENU</u></b>

<ol>
        <li>Makanan</li>
	<ul>
		<li>Sate Padang</li>
		<li>Sate Madura</li>			
	</ul>
         <li>Minuman</li>
	<ul>
		<li>Jus Mangga</li>
		<li>Jus Alpukat</li>			
	</ul>
</ol>

</body>
</html>

Hasilnya: