Untuk membuat list tidak berurutan dalam html menggunakan tag

Question

List atau yang biasa kita sebut dengan daftar berurutan adalah salah satu struktur html yang digunakan untuk menyajikan data secara berurutan dari atas ke bawah dalam bentuk daftar.

Table of Contents Show

Table Of Contents
Macam-Macam List pada HTML
#1 Ordered List
#2 Unordered List
#3 Description List
Tambahan: Nested List
Tag li untuk apa?
Tag apa untuk membuat daftar yang tidak berurut?
Apa itu tag ul?
List dalam HTML ada berapa?

Sedangkan, salah satu penerapan dari list sendiri yaitu daftar isi konten.

Macam-Macam List pada HTML

Pada dasarnya ada tiga macam list pada html, yaitu:

Ordered List adalah list yang terurut (tag <ol>)

Unordered List adalah list yang tak terurut (tag

<!DOCTYPE html>
<html>
<head>
    <title>Membuat Ordered List</title>
</head>
<body>
  <ol>
    <li>Javascript</li>
    <li>PHP</li>
    <li>Java</li>
  </ol>
</body>
</html>

0)

dan Description List adalah list yang berisi definisi. (tag

<!DOCTYPE html>
<html>
<head>
    <title>Membuat Ordered List</title>
</head>
<body>
  <ol>
    <li>Javascript</li>
    <li>PHP</li>
    <li>Java</li>
  </ol>
</body>
</html>

1)

Lalu apa perbedaanya?

Mari kita bahas lebih lanjut...

#1 Ordered List

Untuk membuat ordered list kita akan menggunakan tag <ol>.

Lalu didalamnya kita membutuhkan tag

<!DOCTYPE html>
<html>
<head>
    <title>Membuat Ordered List</title>
</head>
<body>
  <ol>
    <li>Javascript</li>
    <li>PHP</li>
    <li>Java</li>
  </ol>
</body>
</html>

3 sebagai item-item yang ada didalam list tersebut.

Berikut format penulisan ordered list pada html:

<ol>
  <li>Item Pertama</li>
  <li>Item Kedua</li>
  <li>dan Seterusnya</li>
</ol>

Silahkan perhatikan contoh berikut:

<!DOCTYPE html>
<html>
<head>
    <title>Membuat Ordered List</title>
</head>
<body>
  <ol>
    <li>Javascript</li>
    <li>PHP</li>
    <li>Java</li>
  </ol>
</body>
</html>

List diatas akan diurutkan berdasarkan angka

<!DOCTYPE html>
<html>
<head>
    <title>Membuat Ordered List</title>
</head>
<body>
  <ol>
    <li>Javascript</li>
    <li>PHP</li>
    <li>Java</li>
  </ol>
</body>
</html>

4 hingga

<!DOCTYPE html>
<html>
<head>
    <title>Membuat Ordered List</title>
</head>
<body>
  <ol>
    <li>Javascript</li>
    <li>PHP</li>
    <li>Java</li>
  </ol>
</body>
</html>

5.

Namun anda bisa menambahkan atribut

<!DOCTYPE html>
<html>
<head>
    <title>Membuat Ordered List</title>
</head>
<body>
  <ol>
    <li>Javascript</li>
    <li>PHP</li>
    <li>Java</li>
  </ol>
</body>
</html>

6 pada tag

<!DOCTYPE html>
<html>
<head>
    <title>Membuat Ordered List</title>
</head>
<body>
  <ol>
    <li>Javascript</li>
    <li>PHP</li>
    <li>Java</li>
  </ol>
</body>
</html>

7 untuk mengubahnya:

<!DOCTYPE html>
<html>
<head>
    <title>Membuat Ordered List</title>
</head>
<body>
  <ol>
    <li>Javascript</li>
    <li>PHP</li>
    <li>Java</li>
  </ol>
</body>
</html>

8 untuk alfabet a, b, c, dan seterusnya;

<!DOCTYPE html>
<html>
<head>
    <title>Membuat Ordered List</title>
</head>
<body>
  <ol>
    <li>Javascript</li>
    <li>PHP</li>
    <li>Java</li>
  </ol>
</body>
</html>

9 untuk alfabet A, B, C, dan seterusnya;

<ol type="a">
  <li>Javascript</li>
  <li>Python</li>
</ol>

0 untuk angka romwari i, ii, iii, dan seterusnya;

<ol type="a">
  <li>Javascript</li>
  <li>Python</li>
</ol>

1 untuk angka romwari I, II, III, dan seterusnya.

Contoh:

<ol type="a">
  <li>Javascript</li>
  <li>Python</li>
</ol>

#2 Unordered List

Unordered list adalah list yang tak terurut yang menggunakan simbol-simbol pada item-nya.

Untuk membuat Unordered list kita membutuhkan tag

<!DOCTYPE html>
<html>
<head>
    <title>Membuat Ordered List</title>
</head>
<body>
  <ol>
    <li>Javascript</li>
    <li>PHP</li>
    <li>Java</li>
  </ol>
</body>
</html>

0 dan untuk item-nya menggunakan tag

<!DOCTYPE html>
<html>
<head>
    <title>Membuat Ordered List</title>
</head>
<body>
  <ol>
    <li>Javascript</li>
    <li>PHP</li>
    <li>Java</li>
  </ol>
</body>
</html>

3.

Berikut format penulisannya:

<ul>
  <li>Item Pertama</li>
  <li>Item Kedua</li>
  <li>Item Selanjutnya</li>
</ul>

Sehingga jika kita tulis kedalam html akan seperti berikut:

<!DOCTYPE html>
<html>
<head>
    <title>Membuat Unordered List</title>
</head>
<body>
  <ul>
    <li>Javascript</li>
    <li>PHP</li>
    <li>Java</li>
    <li>Python</li>
  </ul>
</body>
</html>

Secara default simbol yang digunakan oleh unordered list adalah lingkaran kecil (disc)..

..namun kita bisa menggantinya dengan atribut

<!DOCTYPE html>
<html>
<head>
    <title>Membuat Ordered List</title>
</head>
<body>
  <ol>
    <li>Javascript</li>
    <li>PHP</li>
    <li>Java</li>
  </ol>
</body>
</html>

6.

Berikut ini nilai yang bisa diberikan untuk atribut

<!DOCTYPE html>
<html>
<head>
    <title>Membuat Ordered List</title>
</head>
<body>
  <ol>
    <li>Javascript</li>
    <li>PHP</li>
    <li>Java</li>
  </ol>
</body>
</html>

6:

<ol type="a">
  <li>Javascript</li>
  <li>Python</li>
</ol>

6 untuk simbol persegi;

<ol type="a">
  <li>Javascript</li>
  <li>Python</li>
</ol>

7 (default) untuk simbol lingkaran disc;

<ol type="a">
  <li>Javascript</li>
  <li>Python</li>
</ol>

8 tidak memakai simbol;

<ol type="a">
  <li>Javascript</li>
  <li>Python</li>
</ol>

9 untuk simbol lingkaran;

Contoh:

<ol type="square">
  <li>PHP</li>
  <li>Java</li>
</ol>

#3 Description List

Description List adalah list yang berisi deksripsi atau penjelasan dari sesuatu.

Ada tiga tag yang digunakan untuk membuat description list:

<!DOCTYPE html>
<html>
<head>
    <title>Membuat Ordered List</title>
</head>
<body>
  <ol>
    <li>Javascript</li>
    <li>PHP</li>
    <li>Java</li>
  </ol>
</body>
</html>

1 (description list) tag untuk memulai description list;

<ul>
  <li>Item Pertama</li>
  <li>Item Kedua</li>
  <li>Item Selanjutnya</li>
</ul>

1 (description term) tag untuk membuat kata yang akan dideskripsikan;

<ul>
  <li>Item Pertama</li>
  <li>Item Kedua</li>
  <li>Item Selanjutnya</li>
</ul>

2 (description description) tag untuk membuat penjelasan dari kata.

Format penulisannya seperti ini:

<dl>
  <dt>Kata 1</dt>
  <dd>Deskripsi dari Kata 1</dd>
  <dt>Kata 2</dt>
  <dd>Deskripsi dari Kata 2</dd>
</dl>

Sehingga jika ditulis dalam html akan sepeti contoh berikut:

<!DOCTYPE html>
<html>
<head>
    <title>Membuat Unordered List</title>
</head>
<body>
  <dl>
    <dt>Java</dt>
    <dd>Java adalah Bahasa pemrograman turunan dari Bahasa C</dd>
    <dt>Flutter</dt>
    <dd>Flutter adalah Bahasa pemrograman turunan dari Bahasa Dart</dd>
  </dl>
</body>
</html>

Tambahan: Nested List

Sedikit tambahan, yang dimaksud dari nested list adalah:

..kita analogikan ingin membuat daftar isi dari sebuah buku.

<!DOCTYPE html>
<html>
<head>
    <title>Membuat Unordered List</title>
</head>
<body>
  <ol>
    <li>Bahasa C
      <ul>
        <li>Bahasa C++</li>
        <li>Bahasa C#</li>
        <li>Bahasa Java</li>
      </ul>
    </li>
    <li>Dart
      <ul>
        <li>Flutter</li>
      </ul>
    </li>
  <ol>
</body>
</html>

Penutup

Dalam praktiknya, penggunaan tag list di dalam html sendiri tidak hanya digunakan untuk membuat daftar saja..

Tag li untuk apa?

Fungsi li pada html adalah untuk menampilkan item pada unordered dan ordered list. Sedangkan pada description list tidak menggunakan tag <li>.

Tag apa untuk membuat daftar yang tidak berurut?

Daftar tidak berurutan ini disebut juga Unordered List. Untuk membuatnya kita menggunakan tag <ul> dan </ul> .

Apa itu tag ul?

Ul (Unordered List) merupakan tag list tidak beraturan yang berfungsi untuk mengurutkan suatu list dengan urutan berupa karakter spesial atau dengan simbol pada HTML.