HTML Lists adalah salah satu fitur yang paling penting dalam pembuatan website. Dengan menggunakan list atau daftar, kamu dapat menyajikan informasi dengan lebih terstruktur dan mudah dibaca.
Dalam artikel ini, kami akan mengungkap rahasia dari berbagai jenis daftar yang tersedia dalam HTML, mulai dari daftar berurutan, daftar tidak berurutan, daftar definisi hingga daftar yang berjenjang.
Ayo, mari kita belajar bersama bagaimana menciptakan konten web yang indah dan efektif dengan HTML Lists!"
HTML Lists
Ada dua jenis list yang dapat digunakan dalam HTML, yaitu ordered list (daftar berurutan) dan unordered list (daftar tidak berurutan).
Daftar berurutan menggunakan tag <ol> sebagai container dan tag <li> untuk setiap item daftar.
Sedangkan daftar tidak berurutan menggunakan tag <ul> sebagai container dan juga tag <li> untuk setiap item.
Selain itu, HTML juga menyediakan tag <dl> (definition list) yang digunakan untuk menyajikan daftar definisi, dengan tag <dt> untuk term dan tag <dd> untuk definisi.
Menggunakan list dalam HTML dapat membuat halaman web lebih terstruktur dan mudah dibaca oleh pengunjung.
Selain itu, list juga dapat digunakan untuk membuat menu navigasi atau daftar produk pada toko online.
Jadi, jika Anda ingin menyajikan data dalam bentuk daftar pada halaman web Anda, HTML Lists adalah pilihan yang tepat.
Contoh Kode HTML Lists
Berikut ini adalah contoh HTML lengkap untuk menampilkan ordered list (daftar berurutan) dan unordered list (daftar tidak berurutan) :
<!DOCTYPE html>
<html>
<head>
<title>Contoh HTML Lists</title>
</head>
<body>
<h2>Daftar Berurutan</h2>
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
<h2>Daftar Tidak Berurutan</h2>
<ul>
<li>Item A</li>
<li>Item B</li>
<li>Item C</li>
</ul>
</body>
</html>
Definition list
Dan ini adalah contoh HTML untuk menampilkan definition list (daftar definisi) :
<!DOCTYPE html>
<html>
<head>
<title>Contoh HTML Definition List</title>
</head>
<body>
<h2>Daftar Definisi</h2>
<dl>
<dt>HTML</dt>
<dd>Hypertext Markup Language, bahasa markup yang digunakan untuk membuat halaman web</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets, bahasa yang digunakan untuk mengatur tampilan halaman web</dd>
<dt>JavaScript</dt>
<dd>Bahasa pemrograman yang digunakan untuk membuat interaksi dan efek pada halaman web</dd>
</dl>
</body>
</html>
Perhatikan bahwa setiap item dalam daftar ditandai dengan tag <li> atau <dt> dan <dd> sesuai dengan jenis list yang digunakan. Kamu juga bisa menambahkan atribut lain seperti class, id atau style untuk memberikan gaya pada list tersebut.
Nested Lists
adalah daftar dalam daftar, yang digunakan untuk menyajikan informasi dalam struktur hirarki. Dalam HTML, kamu dapat menggunakan tag <ul> atau <ol> di dalam tag <li> untuk membuat daftar yang berjenjang.
Berguna untuk menyajikan informasi yang memiliki sub-kategori atau sub-item, seperti daftar belanja makanan atau daftar sub-topik dalam sebuah artikel.
Daftar ini membuat informasi lebih mudah dipahami dan diketahui strukturnya.
Contohnya, jika kamu ingin membuat daftar belanja bulanan, kamu dapat menggunakan daftar bersarang seperti ini:
<html>
<head>
<title>Contoh Nested Lists</title>
</head>
<body>
<h1>Daftar Belanja</h1>
<ul>
<li>Buah-buahan
<ul>
<li>Apel</li>
<li>Pisang</li>
<li>Mangga</li>
</ul>
</li>
<li>Sayur-sayuran
<ul>
<li>Tomat</li>
<li>Buncis</li>
<li>Kangkung</li>
</ul>
</li>
<li>Daging
<ul>
<li>Ayam</li>
<li>Sapi</li>
<li>Ikan</li>
</ul>
</li>
</ul>
</body>
</html>
Di mana, <ul>adalah untuk unordered list, <li>adalah untuk daftar item. Dalam contoh di atas, daftar belanja dibagi menjadi tiga kategori yaitu buah, sayur dan daging, di mana masing-masing kategori memiliki sub-daftar dari menu yang tersedia.
){kind=link}