HTML Academy · Pelajaran

Daftar Tak Berurutan ul dan li

Buat daftar berpoin dengan elemen ul dan li.

Pelajaran 1 dari 413 langkah

Daftar Tak Berurutan ul dan li adalah pelajaran HTML Academy gratis di CoddyKit. Ini adalah pelajaran 1 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar HTML Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus HTML Academy mencakup 4 pelajaran total.

Apa Itu Daftar Tak Berurutan?

Daftar tak berurutan menampilkan item dengan bullet points — urutannya tidak penting:

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

Elemen ul

Elemen <ul> (daftar tak berurutan) membungkus daftar. Hanya elements <li> yang boleh menjadi anak langsung:

<ul>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ul>
<!-- ul = unordered list (bullet points by default) -->
<!-- li = list item -->
<!-- Never put text directly inside ul without li -->

Menata Bullet dengan CSS

Atur penanda daftar dengan CSS:

ul {
  list-style-type: disc;       /* default: filled circle */
  /* circle, square, none */
}

/* Custom bullet with ::before */
ul li::before {
  content: '→ ';
  color: blue;
}

/* Remove all list styling: */
ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

Navigasi sebagai ul

Menu navigasi secara semantik merupakan daftar tautan:

<nav>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/blog">Blog</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

li Dapat Berisi Konten Apa Pun

Item daftar dapat memuat konten alur apa pun:

<ul>
  <li>
    <strong>HTML</strong>
    <p>The structure of the web.</p>
  </li>
  <li>
    <strong>CSS</strong>
    <p>The presentation layer.</p>
  </li>
</ul>

Daftar Sebaris

Tampilkan item daftar secara horizontal dengan CSS:

<ul class="inline-list">
  <li>HTML</li>
  <li>CSS</li>
  <li>JS</li>
</ul>

<!-- CSS: -->
<!--
.inline-list {
  list-style: none;
  padding: 0;
  display: flex;
  gap: 1rem;
}
-->

Penggunaan Semantik ul

Penggunaan semantik umum untuk daftar tak berurutan:

Menu navigasi
Daftar fitur
Awan tag
Tautan terkait
Daftar bahan dalam resep

ul vs p untuk Beberapa Item

Jika Anda memiliki beberapa item yang saling berkaitan, daftar secara semantik lebih baik daripada paragraf terpisah:

<!-- Bad: items that are actually a list -->
<p>- HTML</p>
<p>- CSS</p>
<p>- JavaScript</p>

<!-- Good: -->
<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

Penanda Daftar dengan list-style-image

Gunakan gambar khusus sebagai bullet daftar:

ul {
  list-style-image: url('/icons/check.svg');
}

/* More reliable: use background-image on li::before */
ul li {
  list-style: none;
  padding-left: 1.5rem;
  background: url('/icons/check.svg') no-repeat left center;
  background-size: 1rem;
}

Singkatan list-style

Singkatan list-style menetapkan jenis, posisi, dan gambar:

ul {
  list-style: square inside;    /* type + position */
  list-style: none;             /* remove bullets */
}

/* list-style-position: inside vs outside */
ul {
  list-style-position: inside;  /* bullet inside padding box */
  /* outside = default, bullet outside text block */
}

Aksesibilitas

Catatan aksesibilitas untuk daftar:

Pembaca layar mengumumkan jenis daftar dan jumlah item
Menggunakan list-style: none dapat menyebabkan beberapa pembaca layar tidak mengumumkannya sebagai daftar — tambahkan role="list" untuk mempertahankan semantiknya

<ul style="list-style: none" role="list">
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

Pemeriksaan Singkat

Apa satu-satunya elemen anak langsung yang valid dari ul?

Jawab di pelajaran interaktif

Ringkasan: Daftar Tak Berurutan

Hal-hal penting tentang daftar tak berurutan:

<ul> membungkus daftar yang urutannya tidak penting
<li> adalah satu-satunya anak langsung yang valid
Bullet bawaan: disc; ubah dengan list-style-type
Menu navigasi secara semantik merupakan daftar tautan <ul>
Tambahkan role="list" jika Anda menghapus bullet dengan CSS

Gratis untuk memulai

Belajar HTML dengan tutor AI — gratis

Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.

Kursus: 40
Pelajaran: 159

Mulai belajar gratis Lihat kursus lengkapnya

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Daftar Tak Berurutan ul dan li” gratis?

Ya — teks lengkap “Daftar Tak Berurutan ul dan li” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus HTML Academy, upgrade ke CoddyKit PRO. Kursus HTML Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Daftar Tak Berurutan ul dan li”?

Buat daftar berpoin dengan elemen ul dan li. Kamu berlatih HTML Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai HTML Academy?

Tidak diperlukan pengalaman sebelumnya. HTML Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 4.

Berapa lama pelajaran “Daftar Tak Berurutan ul dan li” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran HTML Academy ini?

Ya. Setiap pelajaran HTML Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke HTML Academy