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 Berurutan

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:

Urutan pertama
Urutan kedua
Urutan ketiga

Daftar Tidak Berurutan

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 Definisi

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