Tutorial Cara Membuat List pada HTML yang Benar

Cara Membuat List HTML
Renovasi Otak - List atau yang kita kenal dengan daftar berurutan merupakan fungsi dalam HTML yang digunakan untuk menampilkan data secara berurutan ke bawah. Dalam HTML penulisan list menggunakan tag <li>. dalam membuat list pada HTML ini terdapat dua jenis tampilan list yang bisa di gunakan yaitu Ordered list dan Unordered list.

Fungsi dan Cara Membuat List pada HTML

Ordered list berfungsi untuk menampilkan daftar list dalam bentuk huruf atau angka. tag yang digunakan dalam ordered list ini yaitu <ol>.
Unordered list berfungsi untuk menampilkan daftar list dalam bentuk bulatan atau kotak di awalnya. tag yang digunakan untuk membuat unordered list yaitu <ul>

Untuk lebih mudahnya, perhatikan contoh penulisan list dalam HTML berikut ini:

<!DOCTYPE html>
<html>
   <head>
 <title>belajar membuat list</title>
   </head>
     <body>
 <ul>
<li>belajar HTML</li>
<li>belajar PHP</li>
 </ul>
     </body>
</html>

fungsi tag ul
Contoh di atas menggunakan <li> untuk membuat list pada HTML. dapat anda lihat sendiri bahwa tampilan standar dari list pada HTML di awali dengan tanda titik.

Ordered List <lo>

Menampilkan daftar list dan diawali dengan huruf atau angka, berikut contoh untuk implementasi ordered list pada HTML.
<!DOCTYPE html>
<html>
  <head>
 <title>belajar membuat list</title>
  </head>
   <body>
 <ol>
<li>belajar HTML</li>
<li>belajar PHP</li>
 </ol>
   </body>
</html>

Fungsi tag ol

Unordered List <ul>

Unordered list adalah jenis list HTML dalam bentu titik pada awal list. berikut contoh unordered list pada HTML :
<!DOCTYPE html>
<html>
   <head>
 <title>belajar membuat list</title>
   </head>
     <body>
 <ul>
<li>belajar HTML</li>
<li>belajar PHP</li>
 </ul>
     </body>
</html>

fungsi tag li

Dari contoh di atas bisa anda lihat perbedaan masing-masing penggunaan jenis list pada HTML. Penggunaan list pada HTML tidak hanya untuk membuat daftar saja. dengan menggabungkan CSS, JavaScript tag list ini bisa di gunakan untuk membuat menu navigasi pada halaman web.
Nando
Anda di sini hanya untuk persinggahan yang singkat. Jangan terburu, jangan khawatir. Yakinlah bahwa Anda menghirup wangi bunga sepanjang perjalanan.

Luangkan sedikit waktu Anda untuk membagikan "Tutorial Cara Membuat List pada HTML yang Benar" kepada teman-teman Anda. Hanya dengan menekan Tombol Sosial Media di bawah ini:

Related Posts

Berlangganan Gratis!

Daftarkan email anda untuk mendapatkan pemberitahuan setiap update artikel terbaru, dan jangan lupa untuk IKUTI Blog kami