Pemrograman HTML/Daftar

Dalam HTML, ada tiga jenis daftar, masing-masing sesuai untuk jenis informasi yang berbeda. Daftar bullet atau poin, ditujukan untuk elemen yang tidak mempunyai urutan atau urutannya tidak penting, ditulis menggunakan tag pembuka dan penutup <ul> dan </ul>. Daftar bernomor, ditujukan untuk elemen yang perlu diurutkan, misalnya urutan langkah untuk dilakukan, ditulis menggunakan tag pembuka dan tag penutup <ol> dan </ol>. Terakhir, ada daftar definisi (definition list), dibuat menggunakan tag <dl> dan </dl>.

Daftar BerurutanSunting

Daftar berurutan menyediakan sebuah daftar barang / hal, masing-masing didahului dengan nomor yang meningkat, dimulai dari 1.

Contoh HTML:

  <ol>
    <li>Urutan pertama</li>
    <li>Urutan kedua</li>
    <li>Urutan ketiga</li>
  </ol>

Contoh tampilan:

  1. Urutan pertama
  2. Urutan kedua
  3. Urutan ketiga

Daftar Tidak BerurutanSunting

Daftar tidak berurutan menampilkan daftar barang / hal, masing-masing didahului dengan bullet.

Contoh HTML:

  <ul>
    <li>Urutan pertama</li>
    <li>Urutan kedua</li>
    <li>Urutan ketiga</li>
  </ul>

Contoh tampilan:

  • Urutan pertama
  • Urutan kedua
  • Urutan ketiga

Daftar DefinisiSunting

Daftar definisi menampilkan daftar istilah dengan huruf tebal, diikuti dengan definisinya pada baris baru dan didahului oleh sebuah tab (secara default).

Contoh HTML:

  <dl>
    <dt>Kata 1</dt>
    <dd>Definisi dari Kata 1</dd>
    <dt>Kata 2</dt>
    <dd>Definisi dari Kata 2</dd>
  </dl>

Contoh tampilan:

Kata 1
Definisi dari Kata 1
Kata 2
Definisi dari Kata 2

Jika dua kata mempunyai definisi yang sama, mereka dapat dikelompokkan bersama seperti berikut:

  <dl>
    <dt>Cascading Style Sheets</dt>
    <dt>CSS</dt>
    <dd>Definisi dari Cascading Style Sheets (aka CSS)</dd>
    <dt>Kata 2</dt>
    <dd>Definisi dari Kata 2</dd>
  </dl>

Contoh tampilan:

Cascading Style Sheets
CSS
Definisi dari Cascading Style Sheets (aka CSS)
Kata 2
Definisi dari Kata 2

Jika sebuah kata mempunyai dua alternatif definisi, gunakan elemen dd terpisah untuk setiap definisinya, misalnya

  <dl>
    <dt>Mouse</dt>
    <dd>Tikus (bahasa Inggris)</dd>
    <dd>Peranti masukan untuk komputer</dd>
  </dl>

Contoh tampilan:

Mouse
Tikus (bahasa Inggris)
Peranti masukan untuk komputer