HTML List Elements Demo

📝 Basic Lists

💡 Dasar-dasar List

HTML menyediakan tiga jenis list utama: unordered, ordered, dan description lists.

lists.html

          
            <!-- Unordered List -->

            <ul>

              <li>Item 1</li>

              <li>Item 2</li>

              <li>Item 3</li>

            </ul>

            <!-- Ordered List -->

            <ol>

              <li>First step</li>

              <li>Second step</li>

              <li>Third step</li>

            </ol>

            <!-- Description List -->

            <dl>

              <dt>HTML</dt>

              <dd>HyperText Markup Language</dd>

              <dt>CSS</dt>

              <dd>Cascading Style Sheets</dd>

            </dl>

🔍 Penjelasan Detail:

• <ul> - Unordered List (bullet points)
• <ol> - Ordered List (nomor/angka)
• <li> - List Item untuk kedua jenis list di atas
• <dl> - Description List untuk istilah dan definisi
• <dt> - Term/konsep yang dideskripsikan
• <dd> - Deskripsi dari term tersebut
• List bisa disarang (nested) untuk hierarki kompleks

⚡ Pro Tips

Gunakan <ol start="50"> untuk memulai ordered list dari angka tertentu, atau reversed untuk urutan terbalik!

🔗 Advanced List Features

💡 Fitur Lanjutan List

HTML5 memperkenalkan beberapa atribut berguna untuk list yang lebih canggih.

advanced-lists.html

          
            <!-- Ordered List dengan tipe berbeda -->

            <ol type="A">

              <li>Huruf besar (A, B, C)</li>

            </ol>

            <ol type="i">

              <li>Angka romawi kecil (i, ii, iii)</li>

            </ol>

            <!-- List dengan marker custom -->

            <ul style="list-style-type: square;">

              <li>Item dengan kotak</li>

            </ul>

            <!-- List dengan start tertentu -->

            <ol start="10">

              <li>Item dimulai dari 10</li>

            </ol>

            <!-- List terbalik -->

            <ol reversed>

              <li>Item ketiga</li>

              <li>Item kedua</li>

              <li>Item pertama</li>

            </ol>

🔍 Penjelasan Detail:

• type - Mengubah tipe penomoran (1, A, a, I, i)
• start - Menentukan angka awal untuk ordered list
• reversed - Membalik urutan penomoran
• list-style-type - CSS untuk mengubah bullet style (disc, circle, square, none)
• value - Atribut pada <li> untuk mengubah nomor tertentu
• List bisa dikombinasikan dengan elemen HTML lain seperti gambar dan link

⚡ Pro Tips

Untuk navigasi, gunakan <nav> dengan list di dalamnya. Ini meningkatkan aksesibilitas dan SEO!