Tag HTML <li>
Contoh
Satu daftar HTML yang dipesan (<ol>) dan satu yang tidak berurutan (<ul>):
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Lebih banyak contoh "Coba Sendiri" di bawah ini.
Definisi dan Penggunaan
Tag <li>mendefinisikan item daftar.
Tag <li>digunakan di dalam daftar terurut ( <ol> ), daftar tidak berurutan ( <ul> ), dan dalam daftar menu ( <menu> ).
Di <ul> dan <menu>, item daftar biasanya akan ditampilkan dengan poin-poin.
Di <ol>, item daftar biasanya akan ditampilkan dengan angka atau huruf.
Tip: Gunakan CSS untuk menata daftar .
Dukungan Peramban
| Element | |||||
|---|---|---|---|---|---|
| <li> | Yes | Yes | Yes | Yes | Yes |
Atribut
| Attribute | Value | Description |
|---|---|---|
| value | number | Only for <ol> lists. Specifies the start value of a list item. The following list items will increment from that number |
Atribut Global
Tag <li>juga mendukung Atribut Global dalam HTML .
Atribut Acara
Tag <li>juga mendukung Atribut Peristiwa dalam HTML .
Lebih Banyak Contoh
Contoh
Penggunaan atribut nilai dalam daftar yang diurutkan:
<ol>
<li value="100">Coffee</li>
<li>Tea</li>
<li>Milk</li>
<li>Water</li>
<li>Juice</li>
<li>Beer</li>
</ol>
Contoh
Setel berbagai jenis gaya daftar (dengan CSS):
<ol>
<li>Coffee</li>
<li
style="list-style-type:lower-alpha">Tea</li>
<li>Milk</li>
</ol>
<ul>
<li>Coffee</li>
<li
style="list-style-type:square">Tea</li>
<li>Milk</li>
</ul>
Contoh
Buat daftar di dalam daftar (daftar bersarang):
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
Contoh
Buat daftar bersarang yang lebih kompleks:
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea
<ul>
<li>China</li>
<li>Africa</li>
</ul>
</li>
</ul>
</li>
<li>Milk</li>
</ul>
Halaman Terkait
Tutorial HTML: Daftar HTML
Referensi DOM HTML: Objek Li
Tutorial CSS: Daftar Gaya
Pengaturan CSS Default
Sebagian besar browser akan menampilkan <li>elemen dengan nilai default berikut:
li {
display: list-item;
}