Belajar HTML Dasar Part 9: Cara Membuat Daftar/List di HTML (tag ol, ul dan li)

Langkah berikutnya yang akan kita pelajari dalam tutorial belajar HTML dasar adalah cara membuat daftar/list di HTML. Untuk menampilkan sebuah text sebagai daftar/list, HTML menyediakan Tag <ol>, <ul> dan <li>.


Cara Membuat Daftar/List di HTML

Dalam HTML, tag list terdiri dari 2 jenis, ordered list (berurutan) dan unordered list (tidak berurutan). Ordered list akan ditampilkan dengan angka atau huruf, sedangkan unordered list dengan bulatan atau kotak.

Ordered list menggunakan tag <ol>, dan unordered list menggunakan tag <ul>, sedangkan untuk list sendiri menggunakan tag <li>. Penjelasan ini akan lebih mudah jika menggunakan contoh.

Berikut adalah contoh kode HTML untuk membuat ordered list menggunakan tag<ol>:

<!DOCTYPE html>
<html>
<head>
  <title>penggunaan tag list </title>
</head>
<body>
  <h1>daftar belanjaan</h1>
  <ol>
  <li>minyak goreng</li>
    <li>sabun mandi</li>
    <li>deterjen</li>
    <li>shampoo</li>
    <li>obat nyamuk</li>
  </ol>
</body>
</html>

Membuat Daftar Ordered List di HTML


Untuk membuat unordered list, tinggal ganti tag <ol> menjadi <ul>.

Berikut adalah contoh kode HTML untuk membuat unordered list menggunakan tag<ul>:

<!DOCTYPE html>
<html>
<head>
  <title>penggunaan tag list </title>
</head>
<body>
  <h1>daftar belanjaan</h1>
  <ul>
    <li>minyak goreng</li>
    <li>sabun mandi</li>
    <li>deterjen</li>
    <li>shampoo</li>
    <li>obat nyamuk</li>
  </ul>
</body>
</html>

Membuat Daftar Unordered List di HTMLPenggunaan tag list pada HTML tidak hanya untuk membuat daftar saja. Dengan CSS, tag list dapat digunakan untuk membuat menu navigasi di dalam halaman web, seperti menu home, contact us, dll. Tag list juga dapat digunakan untuk nested list, atau list bersarang, yang artinya sebuah list yang berada di dalam list lainnya.

Di dalam HTML, selain ordered list dan unordered list, terdapat 1 lagi jenis list, yaitu description list. Pembahasan tentang description list akan kita bahas dalam tutorial HTML Lanjutan: Cara Membuat Description List dalam HTML (tag dl, dt dan dd).

Dalam tutorial belajar HTML dasar selanjutnya, kita akan membahas salah satu tag terpenting dari HTML, yakni tag <a> untuk membuat link di HTML .


eBook HTML Uncover Duniailkom
Anda serius ingin menguasai HTML? Duniailkom telah menyusun eBook HTML Uncover. eBook ini membahas HTML dengan lebih detail dan lebih lengkap hingga fitur terbaru HTML5. Penjelasan lebih lanjut bisa ke: eBook HTML Uncover Duniailkom.

75 Comments

  1. abdul rohman
    14 Apr 15
  2. Alfredo
    15 Apr 15
    • Boby
      25 Jun 15
  3. noor muhammad
    30 Jul 15
    • Andre
      22 Aug 15
  4. Udi
    22 Aug 15
    • Andre
      22 Aug 15
  5. Hamdan
    22 Sep 15
  6. Hamdan
    22 Sep 15
  7. imel
    11 Mar 16
    • Andre
      12 Mar 16
  8. asep saepul
    06 May 16
    • Andre
      06 May 16
  9. Anonymous
    07 Aug 16
  10. abib
    19 Aug 16
  11. Rizal
    11 Sep 16
  12. usman
    12 Oct 16
    • usman
      12 Oct 16
  13. Jemi Yosua
    02 Nov 16
    • Andre
      03 Nov 16
  14. Irfan Maulana
    03 Dec 16
  15. rahmad
    19 Dec 16
  16. Gaya Minimalis
    14 Feb 17
    • Andre
      14 Feb 17
    • dzixnk
      24 Feb 24
  17. Anonymous
    20 Feb 17
    • Andre
      21 Feb 17
  18. Siapa
    20 Mar 17
  19. trackingwisata
    14 Apr 17
    • Andre
      14 Apr 17
  20. Pusat Pengertian
    04 Jun 17
    • Andre
      22 Nov 17
  21. Randy deloven
    25 Jul 17
    • Andre
      27 Jul 17
  22. Dayat
    22 Nov 17
    • Andre
      22 Nov 17
      • Dayat
        22 Nov 17
  23. Mr-keyboard
    30 Nov 17
    • Andre
      02 Dec 17
  24. Dina
    01 Jan 18
    • Andre
      03 Jan 18
  25. Revan febriansyah
    22 Mar 18
  26. Bean
    18 Apr 18
    • Andre
      19 Apr 18
  27. Bean
    18 Apr 18
  28. Jelly
    11 Jul 18
  29. Anonymous
    30 Jul 18
  30. Ivan
    10 Mar 19
    • Andre
      11 Mar 19
  31. Eli
    18 Aug 19
    • Andre
      19 Aug 19
  32. BELLA
    06 Nov 19
    • Andre
      06 Nov 19
  33. Mutiara Aurelie
    10 Apr 20
    • Anonymous
      10 Apr 20
    • Andre
      10 Apr 20
  34. rav
    28 Apr 20
  35. Ryu
    29 Apr 20
    • Andre
      29 Apr 20
      • Ryu
        29 Apr 20
  36. Hediono
    18 Sep 20
    • Andre
      18 Sep 20
    • Ratna
      11 Oct 21
  37. Anonymous
    19 Sep 20
  38. gurusekali
    05 Oct 20
  39. Kevin
    05 Mar 21
  40. Blog Pendidikan
    18 Jun 21
  41. ahmad novianto
    20 Aug 22

Add Comment

Leave a Reply to Anonymous Cancel reply