Cara Membuat List di HTML

List adalah elemen yang digunakan untuk menampilkan informasi dalam bentuk list. Biasanya digunakan untuk membuat menu.

Ada tiga jenis list di HTML:

  1. Ordered List adalah list yang terurut;
  2. Unordered List adalah list yang tak terurut;
  3. Descriptiona List adalah list yang berisi definisi.

Mari kita bahas satu-per-satu…

1. Cara Membuat Ordered List di HTML

Ordered list adalah sebuah list yang terurut. List ini ditandai dengan angka atau huruf di depannya sebagai penanda bahwa list ini terurut.

Ordered list dibuat dengan tag <ol>. Tag ini memiliki anak berupa tag untuk membuat item list yaitu <li> (list item).

Contoh:

<!DOCTYPE html>
<html>
<head>
    <title>Membuat List Ordered</title>
</head>

<body>
    <h3>10 distro linux yang sering digunakan di Indonesia</h3>
    <ol>
        <li>Ubuntu</li>
        <li>Mint</li>
        <li>BlankOn</li>
        <li>Fedora</li>
        <li>Debian</li>
        <li>CentOS</li>
        <li>OpenSUSE</li>
        <li>ElementaryOS</li>
        <li>BackTrack</li>
        <li>Kali Linux</li>
    </ol>
</body>
</html>

Hasilnya:


10 distro linux yang sering digunakan di Indonesia

  1. Ubuntu
  2. Mint
  3. BlankOn
  4. Fedora
  5. Debian
  6. CentOS
  7. OpenSUSE
  8. ElementaryOS
  9. BackTrack
  10. Kali Linux


List diatas diurutkan berdasarkan angka dari 1 sampai 10.

Lalu bagaimana kalau kita ingin menggunakan huruf seperti a, b, c atau angka romawi seperti I, II, III?

Gampang…

Untuk membuat yang seperti itu, kita bisa menggunakan atribut type pada tag ol.

Contoh:

<!DOCTYPE html>
<html>
<head>
    <title>Ordered List dengan Atribut Type</title>
</head>

<body>
   <h3>List dengan type alfabet</h3>
       <ol type='a'>
           <li>Gunakan Linux</li>
           <li>Jadilah Kreatif</li>
           <li>Berani Berbeda</li>
       </ol>
   <h3>List dengan type alfabet kapital (huruf besar)</h3>
       <ol type='A'>
           <li>Gunakan Linux</li>
           <li>Jadilah Kreatif</li>
           <li>Berani Berbeda</li>
       </ol>
   <h3>List dengan type romawi</h3>
       <ol type='i'>
           <li>Gunakan Linux</li>
           <li>Jadilah Kreatif</li>
           <li>Berani Berbeda</li>
       </ol>
   <h3>List dengan type romawi kapital</h3>
       <ol type='I'>
           <li>Gunakan Linux</li>
           <li>Jadilah Kreatif</li>
           <li>Berani Berbeda</li>
       </ol>
</body>
</html>

Hasilnya:


List dengan type alfabet

  1. Gunakan Linux
  2. Jadilah Kreatif
  3. Berani Berbeda

List dengan type alfabet kapital (huruf besar)

  1. Gunakan Linux
  2. Jadilah Kreatif
  3. Berani Berbeda

List dengan type romawi

  1. Gunakan Linux
  2. Jadilah Kreatif
  3. Berani Berbeda

List dengan type romawi kapital

  1. Gunakan Linux
  2. Jadilah Kreatif
  3. Berani Berbeda

2. Cara Membuat Unordered List di HTML

Sementara untuk list yang tidak terurut, biasanya menggunakan simbol-simbol.

Cara membuatnya menggunakan tag <ul> (unordered list). Ia juga memiliki anak yang sama seperti <ul>.

Contoh:

<!DOCTYPE html>
<html>
<head>
  <title>Unordered List</title>
</head>
<body>
  <h3>Daftar bahasa pemrograman</h3>
  <ul>
    <li>C</li>
    <li>C++</li>
    <li>Java</li>
    <li>Python</li>
    <li>PHP</li>
    <li>Ruby</li>
    <li>Perl</li>
  </ul>
</body>
</html>

Hasilnya:


Daftar bahasa pemrograman

  • C
  • C++
  • Java
  • Python
  • PHP
  • Ruby
  • Perl

Secara default simbol yang digunakan oleh unordered list adalah lingkaran kecil (disc). Kita juga dapat menggantinya seperti ordered list dengan menggunakan atribut type.

Contoh:

<!DOCTYPE html>
<html>
<head>
  <title>Unordered List</title>
</head>
<body>
  <h3>Type = square</h3>
  <ul type="square">
    <li>C</li>
    <li>C++</li>
    <li>Java</li>
    <li>Python</li>
    <li>PHP</li>
    <li>Ruby</li>
    <li>Perl</li>
  </ul>
  <h3>Type = disc</h3>
  <ul type="disc">
    <li>C</li>
    <li>C++</li>
    <li>Java</li>
    <li>Python</li>
    <li>PHP</li>
    <li>Ruby</li>
    <li>Perl</li>
  </ul>
  <h3>Type = none</h3>
  <ul type="none">
    <li>C</li>
    <li>C++</li>
    <li>Java</li>
    <li>Python</li>
    <li>PHP</li>
    <li>Ruby</li>
    <li>Perl</li>
  </ul>
  <h3>Type = circle</h3>
  <ul type="circle">
    <li>C</li>
    <li>C++</li>
    <li>Java</li>
    <li>Python</li>
    <li>PHP</li>
    <li>Ruby</li>
    <li>Perl</li>
  </ul>
</body>
</html>

Hasilnya:


Type = square

  • C
  • C++
  • Java
  • Python
  • PHP
  • Ruby
  • Perl

Type = disc

  • C
  • C++
  • Java
  • Python
  • PHP
  • Ruby
  • Perl

Type = none

  • C
  • C++
  • Java
  • Python
  • PHP
  • Ruby
  • Perl

Type = circle

  • C
  • C++
  • Java
  • Python
  • PHP
  • Ruby
  • Perl

Selain menggunakan type list di atas, kita juga bisa menggunakan gambar.

Contohnya:

<ul style="list-style-image: url(https://assets.ubuntu.com/sites/ubuntu/latest/u/img/favicon.ico);">
  <li>C</li>
  <li>C++</li>
  <li>Java</li>
  <li>Python</li>
  <li>PHP</li>
  <li>Ruby</li>
  <li>Perl</li>
</ul>

Hasilnya:


  • C
  • C++
  • Java
  • Python
  • PHP
  • Ruby
  • Perl

Pada contoh di atas, kita menggunakan inline CSS untuk mengganti simbol yang digunakan list dengan gambar ikon.

style="list-style-image: url(https://assets.ubuntu.com/sites/ubuntu/latest/u/img/favicon.ico);"

3. Cara Membuat Description List di HTML

List ini digunakan untuk menampilkan deskripsi/penjelasan. Contohnya seperti kamus.

Tag unutuk membuat description list adalah <dl> (data list). Dalam tag ini terdapat tag <dt> (data term) dan <dd> (data description).

Contoh:

<!DOCTYPE html>
<html>
<head>
  <title>Description List</title>
</head>

<body>
  <dl>
    <dt>Kopi</dt>
    <dd>Sebuah minuman berwarna hitam. Menurut pendapat lain kopi adalah air yang dimasak sampai gosong.</dd>
<dt>Kopi Black Magic</dt>
    <dd>Kopi hitam atau kopi tradisional yang dibuat dengan mantra-mantra.</dd>
<dt>White Coffee</dt>
    <dd>Kopi berwarna putih, kandungan kafeinnya sedikit.</dd>
<dt>Kopi++</dt>
    <dd>Kopi ini mampu meningkatkan imajinasi 99 kali lipat.</dd>
</dl>
</body>
</html>

Hasilnya:

List di dalam List (Nested List)

List juga dapat dibuat di dalam list, misalkan kita ingin menggabungkan ordered list dengan unordered list.

Caranya, list yang di dalam ditulis di dalam tag <li>.

Contoh:

<!DOCTYPE html>
<html>
<head>
    <title>List di dalam List</title>
</head>

<body>
   <h3>Distro Linux dan Keluarganya</h3>
       <ol>
           <li>Debian
             <ul><li>Ubuntu</li>
                 <li>Mint</li>
                 <li>elementaryOS</li>
             </ul>
           </li>
           <li>RedHat
             <ul><li>Fedora</li>
             </ul>
           </li>
           <li>Slackware</li>
       </ol>
</body>
</html>

Hasilnya:


Distro Linux dan Keluarganya

  1. Debian
    • Ubuntu
    • Mint
    • elementaryOS
  2. RedHat
    • Fedora
  3. Slackware


Apa Selanjutnya?

Kita sudah belajar cara membuat list di HTML. Silahkan banyak-banyak latihan agar tidak lupa…

…atau lanjutkan belajar Form di HTML.