Tutorial HTML Dasar Part 8: Cara Membuat Daftar/List di HTML (tag li)

Kamu telah mencapai part 8 dari 14 seri Belajar HTML Dasar

Cara Membuat Daftar/List di HTML (tag li) – Pada tutorial sebelumnya kita sudah membahas tentang Cara Membuat Judul atau Heading di HTML dengan tag h1. Langkah selanjutnya yang akan kita bahas dalam tutorial belajar HTML dasar ini adalah cara membuat daftar/list di HTML dengan tag li. Untuk bisa menampilkan sebuah teks sebagai daftar atau list, HTML sudah menyediakan tag <ol>, <ul>, dan <li>.

Cara Membuat Daftar/List di HTML

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

Ordered list menggunakan tag <ol>, dan unordered list menggunakan tag <ul> sesuai dengan singkatannya, sedangkan untuk list sendiri menggunakan tag <li>. Penjelasan ini akan lebih mudah jika menggunakan contoh. Jadi, langsung saja kita lihat contohnya.

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

<!DOCTYPE html>
<html>
<head>
  <title>Penggunaan Tag List </title>
</head>
<body>
  <h1>Daftar Makanan:</h1>
  <ol>
  <li>Nasi Goreng</li>
    <li>Nasi Uduk</li>
    <li>Ayam Bakar</li>
    <li>Pecel Ayam</li>
    <li>Pecel Lele</li>
  </ol>
</body>
</html>

Tampilan dari kode diatas adalah seperti gambar dibawah ini.

Sedangkan untuk membuat unordered list, kita tinggal mengganti tag <ol> menjadi <ul>.

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

<!DOCTYPE html>
<html>
<head>
  <title>Penggunaan Tag List </title>
</head>
<body>
  <h1>Daftar Makanan:</h1>
  <ul>
  <li>Nasi Goreng</li>
    <li>Nasi Uduk</li>
    <li>Ayam Bakar</li>
    <li>Pecel Ayam</li>
    <li>Pecel Lele</li>
  </ul>
</body>
</html>

Tampilan dari kode diatas adalah seperti gambar dibawah ini.

Penggunaan tag list pada HTML tidak hanya untuk membuat daftar saja. Dengan menggunakan CSS, tag list ini bisa digunakan untuk membuat menu navigasi pada sebuah halaman website, seperti contohnya menu home, privacy policy, disclaimer, contact us, dll. Tag list juga bisa digunakan untuk membuat nested list, atau list bersarang, yang artinya sebuah list yang berada di dalam list lainnya.

Dalam tutorial belajar HTML dasar selanjutnya kita akan membahas tentang salah satu tag yang lumayan penting dari HTML, yaitu tag <a> untuk membuat sebuah link di HTML.

Dibawah ini merupakan semua list dari proses part Belajar HTML Dasar

Belajar HTML Dasar