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
[sunting]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
[sunting]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
[sunting]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