Didiek
Posted on
• HTML

HTML - Daftar List

Author

kita langsung saja ke pokok pembahasan ya,..

HTML menyediakan 3 jenis list daftar yang utama:

1. Unordered List (Daftar Tak Berurutan)

digunakan jika urutan tidak penting, seperti daftar belanja atau menu navigasi, berikut contohnya:

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

📌 tag html yang perlu di perhatikan adalah:
<ul>: unordered list
<li>: list item (isi dari daftar)

🖼️ Output (di browser) yang akan kalian lihat:

  • HTML
  • CSS
  • JavaScript

2. Ordered List (Daftar Berurutan)

digunakan jika urutan penting, seperti langkah-langkah atau instruksi.

<ol>
  <li>Buka laptop</li>
  <li>Buka browser</li>
  <li>Kunjungi situs</li>
</ol>

📌 tag html yang perlu di perhatikan adalah:
<ol>: ordered list
<li>: list item

🖼️ Output yang akan kalian lihat:
1. Buka laptop
2. Buka browser
3. Kunjungi situs

🔧 Selain itu ada atribut tambahan untuk tag <ol> ini, seperti berikut:

  • type: mengubah gaya penomoran. secara default order list ini akan menggunakan angka 1 (defaultnya), namun kamu bisa menggunkan gaya lain dengan menambahkan atribut type A, a, I, i , sehingga tag yang ditulis menjadi : <ol type="A">

  • start: memulai dari angka tertentu kemudian jika kamu butuh melanjutkan urutan dari list yang sudah ada kamu bisa menambahkan atribut start dengan contoh dimulai dari urutan 3, maka kamu bisa menulis seperti : <ol start="3">

Dua atribut diatas bisa juga kamu gabungkan, misal <ol type="A" start="3"> maka list akan di mulai dari urutan C.

Kita lanjut kebagian:

3. Description List (Daftar Deskripsi)

Digunakan untuk membuat daftar berpasangan antara istilah dan penjelasan.

<dl>
  <dt>HTML</dt>
  <dd>Bahasa markup untuk membuat struktur halaman web.</dd>

  <dt>CSS</dt>
  <dd>Bahasa untuk mendesain tampilan halaman web.</dd>
</dl>

📌 tag html yang perlu di perhatikan adalah:
<dl>: description list
<dt>: description term (judul/istilah)
<dd>: description definition (penjelasan)

untuk lebih jelasnya kamu bisa berlatih dengan mengikuti Contoh : daftar.html dibawah ini. disini kamu harusnya sudah tahu ya apa yang harus kamu lakukan, (buka editor teks kamu, dan simpan file dibawah ini dengan nama daftar.html kemudian buka filenya dengan web browser kamu). selamat Mencoba :)

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <title>Daftar HTML</title>
</head>
<body>

  <h1>Contoh List di HTML</h1>

  <h2>Unordered List</h2>
  <ul>
    <li>Apel</li>
    <li>Pisang</li>
    <li>Jeruk</li>
  </ul>

  <h2>Ordered List</h2>
  <ol type="A" start="3">
    <li>Langkah Pertama</li>
    <li>Langkah Kedua</li>
    <li>Langkah Ketiga</li>
  </ol>

  <h2>Description List</h2>
  <dl>
    <dt>HTML</dt>
    <dd>Digunakan untuk struktur halaman.</dd>

    <dt>CSS</dt>
    <dd>Digunakan untuk tampilan halaman.</dd>
  </dl>

</body>
</html>

bagian HTML - Daftar List ini selesai 🎉 terimakasih sudah membaca sampai akhir.

Related posts