Tutorial HTML List – HTML menyediakan fasilitas untuk menampilkan daftar/list. List harus memiliki satu atau lebih elemen di dalamnya. Membuat daftar pada HTML bisa dengan tiga cara antara lain:
<ul>(Unordered List) , membuat daftar tidak terurut;<ol>(Ordered List), membuat daftar terurut;<dl>(Description List), membuat daftar dengan deskripsi.
Membuat Daftar tidak Terurut
Gunakan tag <ul> untuk membuat daftar tidak terurut. Item atau keterangan dari daftar menggunakan tag <li>. Setiap item ditandai dengan titik (bullet) hitam di awal secara default. Tag <ul> digunakan jika ingin menampilkan daftar yang ada tidak urutan atau rentetan khusus.
<!DOCTYPE html>
<html>
<head>
<title>HTML List Ul</title>
</head>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</body>
</html>Hasilnya:
Penanda Daftar tidak Terurut
Secara default, penanda dari daftar menggunakan <ul> adalah bullet (bulatan hitam kecil). Gunakan properti CSS list-style-type untuk mengubah penanda. Penanda yang tersedia untuk daftar tidak terurut antara lain:
- disc, bentuk default (bulatan hitam kecil)
- circle, bentuk lingkaran
- square, bentuk kotak
- none, tanpa penanda
<!DOCTYPE html>
<html>
<head>
<title>HTML List Ul list-style-type</title>
</head>
<body>
<ul style="list-style-type: disc;">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<ul style="list-style-type: circle;">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<ul style="list-style-type: square;">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<ul style="list-style-type: none;">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</body>
</html>Hasilnya:
Membuat Daftar Terurut
Gunakan tag <ol> untuk membuat daftar tidak terurut. Item atau keterangan dari daftar menggunakan tag <li>. Setiap item ditandai dengan angka diikuti titik di awal secara default. Tag <ol> digunakan jika ingin menampilkan daftar yang ada urutan dan rentetan khusus.
<!DOCTYPE html>
<html>
<head>
<title>HTML List Ol</title>
</head>
<body>
<ol>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
</body>
</html>Hasilnya:
Penanda Daftar Terurut
Secara default, penanda dari daftar menggunakan <ol> adalah angka diikuti titik. Gunakan atribut HTML type untuk mengubah penanda. Penanda yang tersedia untuk daftar terurut antara lain:
type="1", penanda berupa angka (default)type="A", penanda berupa huruf kapitaltype="a", penanda berupa huruf keciltype="I", penanda berupa huruf romawi kapitaltype="i", penanda berupa huruf romawi kecil
<!DOCTYPE html>
<html>
<head>
<title>HTML List Ol Type</title>
</head>
<body>
<ol type="1">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
<ol type="A">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
<ol type="a">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
<ol type="I">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
<ol type="i">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
</body>
</html>Hasilnya:
Mengatur Mulai Daftar Terurut
Gunakan atribut HTML start untuk mengatur awal penomoran dari tag <ol>.
<!DOCTYPE html>
<html>
<head>
<title>HTML List Ol Start</title>
</head>
<body>
<ol type="1" start="2">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
<ol type="a" start="3">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
<ol type="i" start="4">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
</body>
</html>Hasilnya:
Daftar Bersarang (List dalam List)
Daftar dapat dibuat bersarang (di dalam daftar ada daftar) baik yang terurut, tidak terurut, maupun gabungan keduanya. Isikan tag <ul> atau <ol> di dalam tag <li> untuk membuat daftar baru.
<!DOCTYPE html>
<html>
<head>
<title>HTML List Nested</title>
</head>
<body>
<ul>
<li>HTML
<ol>
<li>HTML 4</li>
<li>HTML 5</li>
</ol>
</li>
<li>CSS
<ul>
<li>CSS1</li>
<li>CSS2</li>
<li>CSS3</li>
</ul>
</li>
<li>JavaScript</li>
</ul>
</body>
</html>Hasilnya:
Penanda Daftar dengan Gambar
Gunakan properti CSS list-style-image untuk mengubah penanda menjadi gambar baik untuk tag <ol> maupun <ul>.
<!DOCTYPE html>
<html>
<head>
<title>HTML List Image</title>
</head>
<body>
<ul style="list-style-image: url('star.png');">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<ol style="list-style-image: url('favorite.png');">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
</body>
</html>Hasilnya:
Membuat Daftar Deskripsi
HTML juga mendukung pembuatan daftar deskripsi. Daftar deskripsi adalah daftar yang terdiri dari istilah dan keterangan dari masing-masing istilah. Tag yang digunakan adalah:
- Tag <dl> (description list), untuk membuat daftar deskripsi
- Tag <dt> (description term), untuk membuat nama istilah
- Tag <dd> (definition description), untuk membuat arti dari istilah
<!DOCTYPE html>
<html>
<head>
<title>HTML List dl</title>
</head>
<body>
<dl>
<dt>HTML</dt>
<dd>Hyper Text Markup Language</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets</dd>
<dt>JavaScript</dt>
<dd>JavaScript Dapat Merubah Isi HTML</dd>
</dl>
</body>
</html>Hasilnya:
Kesimpulan Tutorial HTML List
- Gunakan tag HTML
<ul>untuk membuat daftar tidak terurut - Gunakan tag HTML
<ol>untuk membuat daftar terurut - Gunakan atribut HTML
startuntuk mengatur awal penomoran daftar terurut - Gunakan properti CSS
list-style-typeuntuk mengubah penanda daftar - Letakkan tag HTML
<ul>maupun<ol>ke dalam tag<li>untuk membuat daftar bersarang - Gunakan properti CSS
list-style-imageuntuk mengubah penanda daftar dengan gambar - Gunakan tag HTML
<dl>,<dt>,<dd>untuk membuat daftar deskripsi
Apa Berikutnya?
Setelah Anda memahami Tutorial HTML List, Anda bisa belajar tentang Tutorial HTML Table Membuat Tabel di HTML atau cek semua daftar Tutorial HTML.