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.

Tutorial Terkait:

41 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
    • Andre
      05 Dec 16
  15. rahmad
    19 Dec 16
  16. Gaya Minimalis
    14 Feb 17
  17. Anonymous
    20 Feb 17
    • Andre
      21 Feb 17
  18. Siapa
    20 Mar 17
    • Andre
      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

Add Comment