Belajar HTML Part 16 - Membuat List di HTML

Contoh List di HTML

List terdiri dari 2 jenis:

Ordered List (list yang berurutan)
Unordered List (list yang tidak berurutan)

Ordered list akan ditampilkan dengan angka atau huruf, sedangkan unordered list dengan bulatan atau kotak.

Ordered List di HTML

Untuk membuat Ordered list (list yang berurutan) gunakan tag <ol>. Setiap list item dimulai dengan tag <li>. Secara default, list item akan ditampilkan dengan angka.

Contoh

<!DOCTYPE html>
<html>
<body>

<h2>Ordered List HTML </h2>
<ol>
  <li>Kopi</li>
  <li>Teh</li>
  <li>Susu</li>
</ol>  

</body>
</html>

Hasilnya:

Contoh diatas adalah tipe default dari ordered list.

Jenis-Jenis Tipe Ordered List

type="1", tipe ini akan menampilkan list dengan angka (type default):

Contoh

<ol type="1">
  <li>Kopi</li>
  <li>Teh</li>
  <li>Susu</li>
</ol>

type="A", tipe ini akan menampilkan list dengan huruf kapital:
Contoh

<ol type="A">
  <li>Kopi</li>
  <li>Teh</li>
  <li>Susu</li>
</ol>

type="a", tipe ini akan menampilkan list dengan huruf kecil:
Contoh

<ol type="a">
  <li>Kopi</li>
  <li>Teh</li>
  <li>Susu</li>
</ol>

type="I", tipe ini akan menampilkan list dengan bilangan romawi besar:
Contoh

<ol type="I">
  <li>Kopi</li>
  <li>Teh</li>
  <li>Susu</li>
</ol>

type="i", tipe ini akan menampilkan list dengan bilangan romawi kecil:
Contoh

<ol type="i">
  <li>Kopi</li>
  <li>Teh</li>
  <li>Susu</li>
</ol>

Hasilnya:

Unordered List di HTML

Untuk membuat unordered list gunakan tag <ul>. Setiap list item dimulai dengan tag <li>. Secara default, list item akan ditampilkan dengan lingkaran hitam kecil.

Contoh

<!DOCTYPE html>
<html>
<body>

<h2>Unordered List HTML</h2>
<ul>
  <li>Kopi</li>
  <li>Teh</li>
  <li>Susu</li>
</ul>  

</body>
</html>

Hasilnya:

Jenis-Jenis Tipe Unordered List

Properti CSS list-style-type digunakan untuk menentukan tipe style list item.

Tipe disc, untuk menampilkan list menjadi lingkaran hitam kecil (tipe default)

Contoh

<ul style="list-style-type:disc">
  <li>Kopi</li>
  <li>Teh</li>
  <li>Susu</li>
</ul>

Tipe circle, untuk menampilkan list menjadi bulatan kecil yang memiliki luang di tengah.

Contoh

<ul style="list-style-type:circle">
  <li>Kopi</li>
  <li>Teh</li>
  <li>Susu</li>
</ul>

Tipe square, untuk menampilkan list menjadi kotak hitam kecil.

Contoh

<ul style="list-style-type:square">
  <li>Kopi</li>
  <li>Teh</li>
  <li>Susu</li>
</ul>

Tipe none, untuk meniadakan tanda list.

Contoh

<ul style="list-style-type:none">
  <li>Kopi</li>
  <li>Teh</li>
  <li>Susu</li>
</ul>

Hasilnya:

Membuat List Deskripsi di HTML

HTML juga mendukung list deskripsi atau description list. List deskripsi biasa digunakan untuk menentukan deskripsi atau penjelasan mengenai istilah suatu kata.

Untuk membuat Description List, seluruh list harus berada di dalam pasangan tag <dl> dan </dl>. Setiap deskripsi atau judul istilah, kita menggunakan tag <dt>. Sedangkan untuk penjelasan istilah tersebut, kita menggunakan tag <dd>.

Contoh

<!DOCTYPE html>
<html>
<body>

<h2>Description List</h2>
<dl>
  <dt>Kopi</dt>
  <dd>- Bagus diminum saat panas</dd>
  <dt>Susu</dt>
  <dd>- Bagus diminum saat sarapan</dd>
</dl>

</body>
</html>

Hasilnya:

Nested List di HTML

Nested List adalah list item yang berisi list item atau bisa dikatakan sebagai list item yang berulang.

Contoh

<!DOCTYPE html>
<html>
<body>

<h2>Nested List</h2>
<ul>
  <li>Kopi</li>
  <li>Teh
    <ul>
    <li>Teh Panas</li>
    <li>Teh Dingin</li>
    </ul>
  </li>
  <li>Susu</li>
</ul>

</body>
</html>

Hasilnya:

Catatan: List item dapat berisi list baru, dan elemen HTML lainnya, seperti gambar, link, dll

List Horizontal

List pada HTML bisa ditata dalam berbagai cara dengan menggunakan properti CSS. Salah satu cara yang populer adalah list horizontal, yang biasa digunakan untuk membuat menu atau navigasi:

Contoh

<!DOCTYPE html>
<html>
<head>
<style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333333;
}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 16px;
    text-decoration: none;
}

li a:hover {
    background-color: #111111;
}
</style>
</head>
<body>

<ul>
  <li><a href="#home">Beranda</a></li>
  <li><a href="#news">Berita</a></li>
  <li><a href="#contact">Kontact</a></li>
  <li><a href="#about">About</a></li>
</ul>

</body>
</html>

Hasilnya: