• 1. Unordered List (Daftar Tak Terurut)
• 2. Ordered List (Daftar Terurut)
• 3. Tipe Penomoran di Ordered List
• 4. Nested List (List di Dalam List)
• 5. Contoh Gabungan
• Kesimpulan

Halo teman-teman semuanya, kali ini kita akan membahas tentang list atau daftar dalam HTML. List sangat berguna untuk menyusun informasi agar lebih rapi dan mudah dibaca, seperti menu navigasi, langkah-langkah tutorial, daftar belanja, dan sebagainya.

Dalam HTML, ada dua jenis list utama: ordered list (terurut) dan unordered list (tidak terurut). Yuk, kita bahas satu per satu.

1. Unordered List (Daftar Tak Terurut)

Daftar ini ditampilkan dengan tanda bullet (●) secara default.

Struktur dasarnya:

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

Penjelasan:

• <ul> adalah singkatan dari unordered list
• <li> adalah list item (item di dalam daftar)

Hasilnya akan seperti ini:

• HTML
• CSS
• JavaScript

2. Ordered List (Daftar Terurut)

Daftar ini ditampilkan dengan angka atau huruf secara otomatis.

Struktur dasarnya:

<ol>
  <li>Install Code Editor</li>
  <li>Buat File HTML</li>
  <li>Tulis Kode HTML</li>
</ol>

Hasilnya:

1. Install Code Editor
2. Buat File HTML
3. Tulis Kode HTML

3. Tipe Penomoran di Ordered List

Kita bisa mengubah tipe penomoran menggunakan atribut type:

<ol type="A">
  <li>Langkah Pertama</li>
  <li>Langkah Kedua</li>
</ol>

Tipe yang tersedia:

• 1 - angka (default)
• A - huruf besar
• a - huruf kecil
• I - angka Romawi besar
• i - angka Romawi kecil

4. Nested List (List di Dalam List)

Kita juga bisa membuat list di dalam list:

<ul>
  <li>Frontend
    <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
    </ul>
  </li>
  <li>Backend</li>
</ul>

Hasilnya:

• Frontend
  • HTML
  • CSS
  • JavaScript
• Backend

5. Contoh Gabungan

<h2>Langkah Belajar Web Development</h2>

<ol>
  <li>Pelajari Dasar HTML</li>
  <li>Pelajari CSS</li>
  <li>Pelajari JavaScript</li>
</ol>

<h2>Tools yang Dibutuhkan</h2>

<ul>
  <li>Code Editor (VS Code)</li>
  <li>Browser (Chrome, Firefox)</li>
  <li>Live Server Extension</li>
</ul>

Kesimpulan

Di artikel ini, kita sudah belajar cara membuat daftar menggunakan tag <ul>, <ol>, dan <li>. Daftar sangat membantu untuk menyajikan informasi secara terstruktur dan mudah dipahami.

Di seri berikutnya, kita akan bahas Form HTML, yaitu bagaimana cara membuat input, tombol, dan berbagai elemen form yang biasa dipakai di halaman kontak, pendaftaran, dan lainnya.

Terima Kasih