Cara Membuat Daftar/List di HTML

Kuy Belajar - Cara Membuat Daftar/List di HTML. Assalamualaikum sobat semua kita bertemu lagi nih, setelah kita membahas Cara Membuat Link di HTML (Tag a). Kali ini kita akan membahas tentang cara membuat daftar/list di HTML. sobat sudah penasaran kan? kuy simak penjelasannya!

Mengenal List di HTML

List adalah bagian teks di dalam dokumen yang berisi daftar item dari suatu kelompok atau grup tertentu. Sebagai contoh, dalam situs web yang bertema kuliner, list dapat berupa daftar dari makanan dan minuman, beserta harganya.

List dapat juga berupa prosedur (urutan langkah-langkah) dari suatu pekerjaan tertentu, yang sifatnya harus dilakukan secara berurutan dari langkah pertama sampai langkah terakhir. List dalam HTML adalah sebuah tag untuk mengelompokkan item-item dari suatu daftar baik secara berurutan maupun tidak berurutan yang dilengkapi dengan nomor alfabetik, nomor numerik ataupun dengan bullet.

Cara Membuat 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>. Agar sobat dapat lebih mudah memahaminya, kuy kita langsung praktikkan saja!

1. Menggunakan Tag <ol>

Berikut ini adalah Skrip HTML yang kita gunakan untuk membuat list dengan tag <ol>


<html>









<title>Kuy Belajar bikin List</title>




</head>



<body>



















<h1>Daftar Bahasa Pemrograman</h1>














  <ol>





    <li>PHP</li>



    <li>CSS</li>


    <li>Javascript</li>

    <li>Java</li>

    <li>C#</li>

  </ol>




</html>

Dari Skrip HTML tersebut maka akan menghasilkan sebuah file seperti pada gambar berikut.

2. Menggunakan Tag <ul>

Untuk membuat unordered list, sobat tinggal mengganti tag <ol> menjadi <ul>. Berikut ini adalah Skrip HTML yang kita gunakan untuk membuat list dengan tag <ol>


<html>










<title>Kuy Belajar bikin List</title>




</head>



<body>



















<h1>Daftar Bahasa Pemrograman</h1>














  <ul>





    <li>PHP</li>



    <li>CSS</li>


    <li>Javascript</li>

    <li>Java</li>

    <li>C#</li>

  </ul>




</html>

Dari Skrip HTML tersebut maka akan menghasilkan sebuah file seperti pada gambar berikut.

2. Menggunakan Tag List Bersarang/Nested

Setelah sobat telah menggunakan tag <ol> dan <ul>. Kali ini kita akan menggabungkan keduanya menjadi list bersarang atau Nested. Untuk lebih memahaminya kuy simak kode di bawah ini.


<html>











<title>Kuy Belajar bikin List</title>






</head>




<body>


















<h1>Daftar Bahasa Pemrograman</h1>














  <ul>





    <li>PHP</li>







       <ol>





     <li>Belajar PHP</li>



     <li>Mengenal PHP</li>


     <li>Pengertian php</li>

 </ol>




    <li>CSS</li>

       













<ol>








     <li>Belajar CSS</li>

     <li>Mengenal CSS</li>

     <li>Pengertian CSS</li>

















 </ol>







 




    <li>Javascript</li>

       













<ol>








     <li>Belajar Javascript</li>

     <li>Mengenal Javascript</li>

     <li>Pengertian Javascript</li>

 </ol>




    <li>Java</li>

       













<ol>








     <li>Belajar Java</li>

     <li>Mengenal Java</li>

     <li>Pengertian Java</li>

 </ol>




    <li>C#</li>

       













<ol>








     <li>Belajar C#</li>

     <li>Mengenal C#</li>

     <li>Pengertian C#</li>

 </ol>

  </ul>




</html>

Dari Skrip HTML tersebut maka akan menghasilkan sebuah file seperti pada gambar berikut.

Penggunaan 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.

Kurang lebih nya itu lah dia pembahasan kita tentang cara membuat daftar/list di HTML, cukup mudah kan sobat? sekian dulu dari saya "Singkat, Semoga Bermafaat." Keep Coding ya sobat!

Kuy ke materi selanjutnya : Cara Memasukkan Gambar di HTML