html Komputer Pemrograman Web
Beranda / Pemrograman / Web / HTML Daftar | Tutorial HTML 31

HTML Daftar | Tutorial HTML 31

Assalamualaikum sobat, di artikel kali ini kami akan membagikan tutorial
mengenai list/daftar HTML, berikut adalah tutorial lengkapnya.

HTML Daftar

Di HTML, kita bisa mengelompokkan beberapa item menjadi sebuah daftar.

Contoh Program 1 : HTML Daftar

<!DOCTYPE html>
<html>
<body>
  <h2>Daftar Berurutan</h2>
  <ol>
    <li>Kopi</li>
    <li>Susu</li>
    <li>Teh</li>
  </ol>
  
  <h2>Daftar Tidak Berurutan</h2>
  <ul>
    <li>Kopi</li>
    <li>Susu</li>
    <li>Teh</li>
  </ul>
</body>
</html>

Hasil Program 1

Penjelasan Program 1

  • Di baris 4 kita membuat sebuah judul.
  • Di baris 5 sampai baris 9 kita membuat daftar berurutan dengan jumlah daftar
    3 buah.
  • Di baris 11 kita membuat sebuah judul.
  • Di baris 12 sampai baris 16 kita membuat sebuah daftar tidak berurutan
    dengan jumlah daftar 3 buah.

Daftar HTML Tidak Berurutan

Elemen <ul> Digunakan untuk membuat daftar tidak berurutan, Untuk setiap
daftar itemnya menggunakan elemen <li>.

Contoh Program 2 : Daftar HTML Tidak Berurutan

<!DOCTYPE html>
<html>
<body>
  <h2>Daftar Tidak Berurutan</h2>
  <ul>
    <li>Cabe</li>
    <li>Bawang Merah</li>
    <li>Jahe</li>
  </ul>
</body>
</html>

Hasil Program 2

Penjelasan Program 2

  • Di baris 4 Kita membuat sebuah judul.
  • Di baris 5 sampai baris 9 kita membuat daftar tidak berurutan dengan jumlah
    daftar item 3 buah.

Daftar HTML Berurutan

Elemen <ol> digunakan untuk membuat daftar berurutan, dan daftar itemnya
menggunakan elemen <li>.

Contoh Program 3 : Daftar Berurutan

<!DOCTYPE html>
<html>
<body>
  <h2>Daftar Berurutan</h2>
  <ol>
    <li>Ayam</li>
    <li>Tempe</li>
    <li>Ikan Mas</li>
  </ol>
</body>
</html>

Hasil Program 3

Penjelasan Program 3

  • Di baris 4 kita membuat sebuah judul.
  • Di baris 5 sampai baris 9 kita membuat daftar berurutan dengan jumlah item 3
    buah.

Daftar Deskripsi HTML

Di HTML, kita bisa membuat daftar deskripsi.
Daftar deskripsi adalah daftar istilah dengan deskripsi setiap istilahnya.
Elemen <dl> digunakan untuk membuat daftar deskripsi, elemen <dt>
mendefinisikan istilah (nama), elemen <dd> digunakan untuk menjelaskan
setiap istilah.

Contoh Program 4 : Daftar Deskripsi

<!DOCTYPE html>
<html>
<body>
  <h2>Daftar deskripsi</h2>
  <dl>
    <dt>Honda</dt>
    <dd>– Beat</dd>
    <dt>Yamaha</dt>
    <dd>– Mio</dd>
  </dl>
</body>
</html>

Hasil Program 4

Penjelasan Program 4

  • Di baris 4 Kita membuat sebuah judul.
  • Di baris 5 sampai baris 10 kita membuat daftar deskripsi yang terdiri dari 2
    buah istilah dan 2 buah penjelasan istilah.

Tag Daftar HTML

Berikut ini adalah tag-tag untuk daftar HTML.
Tag Deskripsi
<ul> Mendefinisikan daftar tidak berurutan
<ol> Mendefinisikan daftar berurutan
<li> Mendefinisikan daftar item
<dl> Mendefinisikan daftar deskripsi
<dt> Mendefinisikan istilah dari daftar deskripsi
<dd> Menjelaskan istilah dari daftar deskripsi
Itulah Tutorial mengenai list/daftar HTML, semoga artikel kali ini bermanfaat,
sampai jumpa di artikel selanjutnya.

Komentar

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *