Nurul Huda
Nurul Huda
  1. Beranda ›
  2. Web ›
  3. HTML ›
  4. HTML Dasar
  5. › HTML Dasar: List

HTML Dasar: List

HTML Dasar: List

Daftar Isi

Jika kita menggunakan aplikasi teks prosesor seperti Microsoft Word, Google Docs, mau pun Libre Office, kita pasti akan menemukan sebuah fitur yang bernama list.

List kita gunakan untuk menampilkan teks dalam bentuk daftar, baik itu daftar nama, daftar kontak, daftar isi, kerangka artikel, dan lain sebagainya.

Sama seperti itu, HTML juga menyediakan kita 3 buah tag untuk menampilkan list.

Jenis-Jenis Tag List

Ada tiga jenis tag list pada HTML:

  1. Ordered List <ol>
  2. Unordered List <ul>
  3. Description List <dl>

Mari kita bahas satu persatu.

Ordered List

Yang pertama adalah ordered list, ia merupakan list dengan item terurut.

Ordered list biasanya dimulai dari angka 1 sampai angka ke-n.

Kita bisa membuat ordered list dengan gabungan dari tag <ol> dan <li>.

Perhatikan contoh berikut:

<h2>Contoh List Terurut</h2>

<p>Daftar hobi saya:</p>
<ol>
  <li>Berenang</li>
  <li>Berlari</li>
  <li>Menulis</li>
  <li>Membaca</li>
  <li>Memasak</li>
</ol>

Hasil keluaran:

Kita bisa perhatikan hasil keluaran di atas bahwa di sebelah kiri tiap item, terdapat marker berupa angka dari 1 sampai n.

Atribut Tag <ol>

Tag <ol> memiliki setidaknya 2 atribut:

  • atribut type untuk mengatur tipe angka
  • atribut start untuk mengatur angka awal

Atribut Type

Atribut type berfungsi untuk mengatur tipe dari angka pada setiap item list.

Terdapat 5 nilai yang bisa kita gunakan untuk atribut type, yaitu:

  1. Nilai 1 untuk menampilkan angka 1, 2, 3 dan seterusnya
  2. Nilai a untuk menampilkan huruf a, b, c dan seterusnya
  3. Nilai A untuk menampilkan huruf A, B, C dan seterusnya
  4. Nilai i untuk menampilkan angka romawi i, ii, iii dan seterusnya
  5. Nilai I untuk menampilkan angka romawi I, II, III dan seterusnya

Perhatikan contoh berikut:

<h2>a, b, c</h2>
<ol type="a">
  <li>Belajar HTML</li>
  <li>Belajar Python</li>
  <li>Belajar PHP</li>
</ol>

<h2>A, B, C</h2>
<ol type="A">
  <li>Belajar HTML</li>
  <li>Belajar Python</li>
  <li>Belajar PHP</li>
</ol>

<h2>i, ii, iii</h2>
<ol type="i">
  <li>Belajar HTML</li>
  <li>Belajar Python</li>
  <li>Belajar PHP</li>
  <li>Belajar Linux</li>
</ol>

<h2>I, II, III</h2>
<ol type="I">
  <li>Belajar HTML</li>
  <li>Belajar Python</li>
  <li>Belajar PHP</li>
  <li>Belajar Linux</li>
</ol>

Hasil keluaran:

Atribut Start

Selain itu, kita bisa menggunakan atribut start untuk memulai list tidak dari angka 1 akan tetapi langsung dari angka tertentu.

Perhatikan contoh berikut:

<h2>List Langsung Dari 10</h2>
<ol start="10">
  <li>Belajar HTML</li>
  <li>Belajar Python</li>
  <li>Belajar PHP</li>
  <li>Belajar Linux</li>
</ol>

Hasil keluaran:

Sayangnya atribut start hanya bisa kita gunakan untuk tipe angka.

<h2>List Langsung Dari K (Tidak Bisa)</h2>
<ol type="a" start="k">
  <li>Belajar HTML</li>
  <li>Belajar Python</li>
  <li>Belajar PHP</li>
  <li>Belajar Linux</li>
</ol>

Hasil Keluaran:

Pada contoh di atas, kita telah memberi nilai k pada atribut start akan tetapi list tersebut tetap dimulai dari huruf a.

Unordered List

Jenis list berikutnya yang bisa kita gunakan adalah unordered list atau list tak terurut.

Untuk membuatnya, kita bisa menggunakan gabungan dari tag <ul> dan tag <li>.

Perhatikan contoh berikut;

<h2>Contoh list tak terurut</h2>

<p>Saya suka makan:</p>
<ul>
  <li>Nasi Pecel</li>
  <li>Nasi Goreng</li>
  <li>Nasi Uduk</li>
  <li>Nasi Kuning</li>
</ul>

Hasil Keluaran:

Atribut Type

Kalau kita perhatikan hasil keluaran di atas, di sebelah kiri tiap item terdapat marker berupa bulat-bulat lingkaran warna hitam.

Kita bisa mengganti bagian tersebut menggunakan atribut type pada tag <ul>.

Atribut <type> memiliki 4 buah nilai, yaitu:

  1. disc - ini adalah bulat-bulat default
  2. circle - mengatur marker agar menggunakan lingkaran (bolong)
  3. square - mengatur marker menjadi persegi
  4. none - tanpa marker

Perhatikan contoh berikut:

<h2>Marker disc</h2>

<ul type="disc">
  <li>Nasi Pecel</li>
  <li>Nasi Goreng</li>
  <li>Nasi Uduk</li>
  <li>Nasi Kuning</li>
</ul>

<h2>Marker circle</h2>

<ul type="circle">
  <li>Nasi Pecel</li>
  <li>Nasi Goreng</li>
  <li>Nasi Uduk</li>
  <li>Nasi Kuning</li>
</ul>

<h2>Marker square</h2>

<ul type="square">
  <li>Nasi Pecel</li>
  <li>Nasi Goreng</li>
  <li>Nasi Uduk</li>
  <li>Nasi Kuning</li>
</ul>

<h2>Marker none</h2>

<ul type="none">
  <li>Nasi Pecel</li>
  <li>Nasi Goreng</li>
  <li>Nasi Uduk</li>
  <li>Nasi Kuning</li>
</ul>

Hasil Keluaran:

Custom Gambar

Selain itu, kita juga bisa menggunakan CSS untuk membuat marker berupa gambar.

Perhatikan contoh berikut:

<style>
  ul {
    list-style-image: url(https://ik.imagekit.io/jagongoding/images/jagongoding-logo.png?tr=w-15);
  }
</style>

<p>Aku ingin belajar:</p>
<ul>
  <li>PHP</li>
  <li>Python</li>
  <li>HTML</li>
  <li>Linux</li>
</ul>

Hasil Keluaran:

Pada contoh di atas kita telah mengganti marker dari tiap item menjadi image dengan url: https://ik.imagekit.io/jagongoding/images/jagongoding-logo.png?tr=w-15.

Description List

Jenis list yang berikutnya adalah description list. Ia merupakan sebuah list dengan sifat deskriptif, kita gunakan untuk menjelaskan sesuatu baik istilah, nama, dan lain sebagainya.

Ada 3 sintaks yang kita gunakan untuk membuat description list:

  1. <dl> untuk parent-nya
  2. <dt> untuk teks istilah
  3. <dd> untuk teks deskripsi

Perhatikan contoh berikut:

<dl>
  <dt>PHP</dt>
  <dd>adalah bahasa pemrograman untuk membuat website</dd>

  <dt>Python</dt>
  <dd>adalah bahasa pemrograman sederhana dengan tujuan umum</dd>

  <dt>HTML</dt>
  <dd>
    adalah bahasa markup untuk mendefinisikan struktur
    halaman website
  </dd>
</dl>

Hasil Keluaran:

List Bersarang / Bertingkat

Yang terakhir dan bukan yang paling akhir: sebuah list di dalam HTML bisa bersifat nested atau bertingkat.

Alias: di dalam list masih ada list lagi.

Hal ini sangat umum kita jumpai di dalam aplikasi pemrosesan teks. Akan tetapi, bagaimana cara membuatnya di dalam HTML?

Cara membuatnya gampang: kita hanya perlu membuat list baru di dalam tag <li>.

Perhatikan contoh berikut:

<ol>
  <li>
    Pendahuluan
    <ol>
      <li>Latar Belakang</li>
      <li>Rumusan Masalah</li>
      <li>Batasan Masalah</li>
      <li>Tujuan</li>
      <li>Manfaat</li>
    </ol>
  </li>
  <li>
    Daftar Pustaka
    <ol>
      <li>Teori</li>
      <li>Hipotesis</li>
    </ol>
  </li>
</ol>

Hasil Keluaran:

Contoh untuk <ul>:

<ul>
  <li>
    Makanan favorit
    <ul>
      <li>Nasi Goreng</li>
      <li>Nasi Pecel</li>
    </ul>
  </li>
  <li>
    Minuman favorit
    <ul>
      <li>
        Kopi

        <ul>
          <li>Kopi Hitam</li>
          <li>Kopi Susu</li>
        </ul>
      </li>
      <li>Jus Tomat</li>
    </ul>
  </li>
</ul>

Hasil Keluaran:

Kita juga bisa menggabungkan antara <ul> dan <ol> secara bersamaan:

<ul>
  <li>
    Makanan favorit
    <ol>
      <li>Nasi Goreng</li>
      <li>Nasi Pecel</li>
    </ol>
  </li>
  <li>
    Minuman favorit
    <ol>
      <li>
        Kopi

        <ul>
          <li>Kopi Hitam</li>
          <li>Kopi Susu</li>
        </ul>
      </li>
      <li>Jus Tomat</li>
    </ol>
  </li>
</ul>

Hasil Keluaran:

Kode Program Lengkap

Bagi kalian yang ingin mendapatkan kode program lengkap, silakan kunjungi repository html-dasar di github.

Jangan lupa kasih ⭐⭐

Pertemuan Selanjutnya

Insyaallah pada pertemuan selanjutnya kita akan membahas cara membuat tabel pada dokumen HTML.

Stay tune!

Belajar Ngoding di Udemy