Tutorial HTML 10 : Cara Membuat List
• 9 min read • 3747 views
Tutorial HTML 10 : Cara Membuat List
HTML, singkatan dari HyperText Markup Language, adalah bahasa standar yang digunakan untuk membuat dan merancang halaman web. Salah satu elemen dasar dalam HTML adalah list, yang memungkinkan pengguna untuk menyusun konten dalam format yang terstruktur. Dalam artikel ini, kita akan membahas cara membuat list di HTML secara detail, mulai dari list sederhana hingga list yang lebih kompleks dengan menggunakan tag dan atribut yang tersedia. Dengan pemahaman yang kuat tentang cara membuat list, Anda dapat meningkatkan tata letak dan navigasi halaman web Anda dengan lebih efektif.
Table of Contents
Elemen List di HTML
Elemen List di HTML memainkan peran penting dalam menyusun dan merancang tata letak konten di halaman web. Tiga jenis utama dari elemen list tersebut adalah Ordered List, Unordered List, dan Description List. Untuk Detailnya, mari kita bahas masing-masing dengan lebih mendalam:
-
Ordered List (List Berurutan):
Ordered List digunakan untuk menyusun item-item dalam urutan yang jelas, biasanya dengan menggunakan angka atau huruf sebagai penanda urutan. Elemen <ol> (ordered list) digunakan untuk mengelompokkan item-item ini, sedangkan setiap item di dalamnya ditandai dengan tag <li> (list item). Dengan Ordered List, pengguna dapat dengan mudah mengkomunikasikan urutan penting dari sebuah seri item, seperti langkah-langkah dalam proses atau poin-poin dalam daftar.
-
Unordered List (List Tak Berurutan):
Unordered List digunakan ketika urutan item tidak memiliki makna penting, dan item tersebut hanya perlu disajikan secara terpisah. Elemen <ul> (unordered list) digunakan untuk mengelompokkan item-item ini, dan setiap item di dalamnya ditandai dengan tag <li> (list item). Unordered List sering digunakan untuk membuat daftar pilihan, fitur, atau kategori yang tidak memiliki urutan spesifik.
-
Description List (List Deskripsi):
Description List digunakan untuk menyajikan item-item bersama dengan deskripsi atau definisi singkat untuk masing-masing item. Elemen <dl> (description list) digunakan untuk mengelompokkan item-item ini. Setiap item dalam Description List terdiri dari dua bagian: judul atau istilah yang ditandai dengan tag <dt> (description term), dan deskripsi atau definisi yang ditandai dengan tag <dd> (description definition). Description List berguna untuk menyajikan istilah dengan definisinya, daftar fitur dengan penjelasan singkat, atau item-item dengan atribut dan nilai yang terkait.
Dengan memahami perbedaan dan penggunaan masing-masing jenis list ini, pengembang web dapat membuat tata letak halaman web yang lebih terstruktur dan informatif. Selain itu, dengan memanfaatkan fitur-fitur tambahan seperti atribut dan nested list, pengguna dapat meningkatkan fleksibilitas dan kegunaan list di dalam dokumen HTML mereka.
Baca Juga
Kita akan mengurai 3 Jenis List Tersebut satu persatu
Ordered List
Ordered List di HTML adalah salah satu cara yang efektif untuk menyajikan informasi dalam urutan yang jelas dan terstruktur. Elemen <ol> digunakan untuk mengelompokkan item-item yang akan ditampilkan dalam list berurutan. Di dalam <ol>, setiap item didefinisikan menggunakan tag <li> (list item), yang menandakan elemen individu dalam list tersebut.
Contoh penggunaan Ordered List dalam kode HTML:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Membuat Ordered List</title>
</head>
<body>
<h1>Buah Favoritku:</h1>
<ol>
<li>Jeruk</li>
<li>Durian</li>
<li>Pisang</li>
<li>Pepaya</li>
<li>Mangga</li>
</ol>
</body>
</html>
```
Dalam contoh di atas, kita membuat sebuah Ordered List yang berisi daftar buah favorit. Tiap buah ditempatkan dalam tag <li>, dan mereka akan muncul dalam urutan yang ditentukan dalam elemen <ol>. Ketika halaman web di-render, daftar buah akan ditampilkan dengan nomor urutan secara otomatis, dimulai dari 1 dan meningkat sesuai dengan jumlah item dalam list.
Penggunaan Ordered List sangat bermanfaat dalam berbagai konteks, seperti langkah-langkah dalam proses, daftar tugas, atau rangkaian instruksi. Dengan menggunakan Ordered List, pengguna dapat dengan mudah mengurutkan dan memahami informasi dalam urutan yang sesuai dengan kebutuhan. Selain itu, Ordered List juga dapat digunakan bersama dengan CSS untuk menyesuaikan tampilan visual, seperti gaya dan warna teks, serta penomoran atau huruf yang digunakan. Dengan demikian, Ordered List merupakan salah satu fitur yang sangat berguna dalam pembuatan halaman web yang informatif dan mudah dimengerti oleh pengguna.
Unordered List
Unordered List di HTML merupakan salah satu cara untuk menyusun informasi dalam daftar yang tidak memiliki urutan tertentu. List ini menggunakan simbol-simbol, seperti bulletpoints atau tanda cek, pada setiap item-nya. Dalam HTML, Unordered List dibuat menggunakan tag <ul>, yang menandakan awal dari list tak terurut. Setiap item dalam list ditandai dengan tag <li> (list item), yang menunjukkan elemen individu dalam list tersebut.
Berikut adalah contoh penggunaan Unordered List dalam kode HTML:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Membuat Unordered List</title>
</head>
<body>
<h1>Bahasa Pemrograman untuk Dipelajari:</h1>
<ul>
<li>Javascript</li>
<li>PHP</li>
<li>Java</li>
<li>Python</li>
<li>Kotlin</li>
</ul>
</body>
</html>
```
Pada contoh di atas, kita membuat sebuah Unordered List yang berisi daftar bahasa pemrograman yang ingin dipelajari. Setiap bahasa pemrograman ditempatkan dalam tag <li>, dan mereka akan muncul dalam list tanpa urutan tertentu, hanya dengan simbol-simbol yang ditentukan secara default oleh browser.
Penggunaan Unordered List sangat berguna dalam menyajikan informasi yang tidak memerlukan urutan spesifik, seperti daftar pilihan atau kategori yang memiliki nilai yang setara. Dengan menggunakan Unordered List, pengguna dapat dengan mudah menambahkan, menghapus, atau mengubah posisi item dalam list tanpa memengaruhi tampilan keseluruhan. Selain itu, Unordered List juga dapat disesuaikan dengan menggunakan CSS untuk mengatur gaya visual, seperti jenis simbol, warna, dan jarak antar item. Dengan demikian, Unordered List merupakan salah satu elemen yang penting dalam merancang halaman web yang informatif dan mudah dinavigasi.
Description List
Description List di HTML digunakan untuk menyajikan daftar istilah beserta penjelasannya atau definisinya. Untuk membuat Description List, kita menggunakan tiga tag utama:
- `
<dl>` (description list): Tag ini digunakan untuk memulai Description List. - `
<dt>` (description term): Tag ini digunakan untuk membuat kata atau istilah yang akan dideskripsikan. - `
<dd>` (description description): Tag ini digunakan untuk membuat penjelasan atau definisi dari kata atau istilah tersebut.
Berikut adalah contoh penggunaan Description List dalam kode HTML:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Membuat Description List</title>
</head>
<body>
<h1>Daftar Istilah:</h1>
<dl>
<dt>Kopi</dt>
<dd>Sebuah minuman berwarna hitam. Menurut pendapat lain kopi adalah air yang dimasak sampai gosong.</dd>
<dt>Kopi Black Magic</dt>
<dd>Kopi hitam atau kopi tradisional yang dibuat dengan mantra-mantra.</dd>
<dt>White Coffee</dt>
<dd>Kopi berwarna putih, kandungan kafeinnya sedikit.</dd>
<dt>Kopi++</dt>
<dd>Kopi ini mampu meningkatkan imajinasi 99 kali lipat.</dd>
</dl>
</body>
</html>
```
Pada contoh di atas, kita membuat sebuah Description List yang berisi daftar istilah seputar kopi beserta penjelasannya. Setiap istilah didefinisikan menggunakan tag `<dt>`, sedangkan penjelasannya diberikan menggunakan tag `<dd>`. Hal ini memungkinkan pengguna untuk dengan jelas memahami arti dari setiap istilah yang disajikan dalam list tersebut.
- Tutorial HTML Part 1 : Pengenalan
- Tutorial HTML Part 2 : Tag, Element dan Atribut
- HTML 3 : Tutorial Membuat Paragraf
- HTML 4 : Cara Membuat Heading
- HTML Part 5 : Cara Membuat Komentar
- HTML 6 : Belajar Teks Formatting
- Tutorial HTML 7 : Membuat Link Untuk Menghubungkan Web
- Tutorial HTML 8 : Cara Menampilkan Gambar
- Tutorial HTML 9 : Jenis Atribut tag IMG HTML
- Tutorial HTML 10 : Cara Membuat List
- Tutorial HTML 11 : Cara Membuat Tabel
- Tutorial HTML 12 : Cara Membuat Form
- Tutorial HTML 14 : Cara Menampilkan Video
- Tutorial HTML 13 : Belajar Elemen Semantik
- Tutorial HTML 15 : Cara Menampilkan Audio
- Tutorial HTML 16 : Cara Membuat Website Sederhana
- Membuat Aplikasi Keuangan Pribadi Menggunakan Python dan Django ( Tutorial Lengkap )
Last updated on June 03, 2026
