Membuat Daftar/List HTML ~ KODELOVER

Contoh daftar tak berurutan dan daftar pesanan dalam HTML:

Unordered List:

Item
Item
Item
Item

Ordered List:

First item
Second item
Third item
Fourth item

Daftar HTML tak berurutan/Unordered List

Daftar unordered dimulai dengan tag <ul>. Setiap item daftar dimulai dengan tag <li>.

Item daftar akan ditandai dengan peluru (lingkaran hitam kecil):
Contoh
<ul>
<li> Kopi </li>
<li> Teh </li>
<li> Susu </li>
</ul>

Daftar HTML Tanpa Daftar - Atribut Gaya

Atribut gaya dapat ditambahkan ke daftar tak berurutan, untuk menentukan gaya penanda:
Deskripsi Gaya
List-style-type: disc Item daftar akan ditandai dengan peluru (default)
Daftar tipe-gaya: lingkaran Item daftar akan ditandai dengan lingkaran
List-style-type: square Item daftar akan ditandai dengan kotak
List-style-type: none Item daftar tidak akan ditandai
Cakram:
<ul style = "list-style-type: disc">
<li> Kopi </li>
<li> Teh </li>
<li> Susu </li>
</ul>
Lingkaran:
<ul style = "list-style-type: circle">
<li> Kopi </li>
<li> Teh </li>
<li> Susu </li>
</ul>
Kotak:
<ul style = "list-style-type: square">
<li> Kopi </li>
<li> Teh </li>
<li> Susu </li>
</ul>
Tidak ada
<ul style = "list-style-type: none">
<li> Kopi </li>
<li> Teh </li>
<li> Susu </li>
</ul>

Daftar HTML yang dipesan

Daftar pesanan dimulai dengan tag <ol>. Setiap item daftar dimulai dengan tag <li>.

Item daftar akan ditandai dengan angka:
Contoh
<ol>
<li> Kopi </li>
<li> Teh </li>
<li> Susu </li>
</ol>
Daftar HTML yang dipesan - Atribut Tipe

Atribut tipe dapat ditambahkan ke daftar pesanan, untuk menentukan jenis penanda:
Jenis Deskripsi
Type = "1" Item daftar akan diberi nomor dengan angka (default)
Type = "A" Item daftar akan diberi nomor dengan huruf besar
Type = "a" Item daftar akan diberi nomor dengan huruf kecil
Type = "I" Item daftar akan diberi nomor dengan huruf roman huruf besar
Type = "i" Item daftar akan diberi nomor dengan nomor roman huruf kecil
Angka:
<ol type = "1">
<li> Kopi </li>
<li> Teh </li>
<li> Susu </li>
</ol>
Huruf besar:
<ol type = "A">
<li> Kopi </li>
<li> Teh </li>
<li> Susu </li>
</ol>
Huruf kecil:
<ol type = "a">
<li> Kopi </li>
<li> Teh </li>
<li> Susu </li>
</ol>
Huruf Romawi huruf besar:
<ol type = "saya">
<li> Kopi </li>
<li> Teh </li>
<li> Susu </li>
</ol>
Huruf kecil huruf Romawi:
<ol type = "i">
<li> Kopi </li>
<li> Teh </li>
<li> Susu </li>
</ol>
Daftar Deskripsi HTML

HTML juga mendukung daftar deskripsi.

Daftar deskripsi adalah daftar istilah, dengan deskripsi masing-masing istilah.

Tag <dl> mendefinisikan daftar deskripsi, tag <dt> mendefinisikan istilah (nama), dan tag <dd> menjelaskan setiap istilah:
Contoh
<dl>
<dt> Kopi </dt>
<dd> - minuman panas hitam </dd>
<dt> Susu </dt>
<dd> - minuman dingin putih </dd>
</dl>
Daftar HTML bersarang

Daftar dapat disarangkan (daftar di dalam daftar):
Contoh
<ul>
<li> Kopi </li>
<li> Teh
    <ul>
      <li> Teh hitam </li>
      <li> Teh hijau </li>
    </ul>
</li>
<li> Susu </li>
</ul>
Item Daftar Catatan dapat berisi daftar baru, dan elemen HTML lainnya, seperti gambar dan tautan, dll.

Daftar Horizontal

Daftar HTML bisa ditata dengan berbagai cara dengan CSS.

Salah satu cara yang populer, adalah dengan menata daftar yang akan ditampilkan secara horisontal:
Contoh
<! DOCTYPE html>
<html>

<head>
<style>
ul #menu li {
    Tampilan: inline;
}
</style>
</head>

<body>

<h2> Daftar Horisontal </ h2>

<ul id = "menu">
<li> HTML </li>
<li> CSS </li>
<li> JavaScript </li>
<li> PHP </li>
</ul>

</body>
</html>

Dengan sedikit gaya ekstra, Anda bisa membuatnya terlihat seperti menu:
Contoh
ul #menu {
    Padding: 0;
}

ul #menu li {
    Tampilan: inline;
}

ul #menu li a {
    Background-color: hitam;
    warna putih;
    Padding: 10px 20px;
    Hiasan teks: tidak ada;
    Border-radius: 4px 4px 0 0;
}

ul #menu li a: hover {
    Background-color: oranye;
}

Ringkasan

    Gunakan elemen HTML <ul> untuk menentukan daftar unordered
    Gunakan atribut style HTML untuk menentukan gaya peluru
    Gunakan elemen HTML <ol> untuk menentukan daftar pesanan
    Gunakan atribut tipe HTML untuk menentukan jenis penomoran
    Gunakan elemen HTML <li> untuk menentukan item daftar
    Gunakan elemen HTML <dl> untuk menentukan daftar deskripsi
    Gunakan elemen HTML <dt> untuk menentukan istilah deskripsi
    Gunakan elemen HTML <dd> untuk menentukan data deskripsi
    Daftar bisa disisipkan di dalam daftar
    Daftar item dapat berisi elemen HTML lainnya
    Gunakan tampilan properti CSS: sebaris untuk menampilkan daftar secara horisontal


Tag List HTML
<ul> Mendefinisikan daftar yang tidak berurutan
<ol> Mendefinisikan sebuah daftar pesanan
<li> Mendefinisikan daftar item
<dl> Mendefinisikan sebuah daftar deskripsi
<dt> Mendefinisikan istilah tersebut dalam daftar deskripsi
<dd> Mendefinisikan deskripsi dalam daftar deskripsi

KODELOVER

Membuat Daftar/List HTML

Unordered List:

Ordered List:

Related Post