Tanda <li> HTML

Definisi dan penggunaan

<li> Tag menentukan item daftar.

<li> Tag digunakan untuk daftar terurut (<ol>) dan daftar tak terurut (<ul>) dan daftar menu (<menu>)

Pada <ul> dan <menu>, item daftar biasanya ditampilkan dengan tanda titik.

Pada <ol>, item daftar biasanya ditampilkan dengan angka atau huruf.

Petunjuk:Gunakan CSS untukAtur gaya daftar.

Lihat pula:

Pelajaran HTML:Daftar HTML

Panduan Referensi HTML DOM:Objek Li

Pelajaran CSS:Atur gaya daftar

Contoh

Contoh 1

Daftar terurut (<ol>) dan daftar tak terurut (<ul>) Daftar HTML:

<ol>
  <li> Kopi </li>
  <li>Teh</li>
  <li> sapi </li>
</ol>
<ul>
  <li> Kopi </li>
  <li>Teh</li>
  <li> sapi </li>
</ul>

Coba sendiri

Contoh 2

Gunakan atribut value dalam daftar terurut:

<ol>
  <li value="100">Kopi</li>
  <li>Teh</li>
  <li> sapi </li>
  <li>Pure Air</li>
  <li>Jus</li>
  <li>Bier</li>
</ol>

Coba sendiri

Contoh 3

Atur jenis gaya daftar yang berbeda (dengan CSS):

<ol>
  <li> Kopi </li>
  <li style="list-style-type:lower-alpha">Teh</li>
  <li> sapi </li>
</ol>
<ul>
  <li> Kopi </li>
  <li style="list-style-type:square">Teh</li>
  <li> sapi </li>
</ul>

Coba sendiri

Contoh 4

Buat daftar dalam daftar (daftar yang terdapat didalam daftar):

<ul>
  <li> Kopi </li>
  <li> Teh </li>
    <ul>
      <li> Puer </li>
      <li>Te</li>
    </ul>
  </li>
  <li> sapi </li>
</ul>

Coba sendiri

Contoh 5

Buat daftar yang lebih kompleks:

<ul>
  <li> Kopi </li>
  <li> Teh </li>
    <ul>
      <li> Puer </li>
      <li> Teh hijau </li>
        <ul>
          <li> Puer </li>
          <li> Longjing </li>
        </ul>
      </li>
    </ul>
  </li>
  <li> sapi </li>
</ul>

Coba sendiri

Atribut

Atribut Nilai Deskripsi
value Angka Hanya berlaku untuk daftar <ol>. Menentukan nilai awal item daftar. Item daftar berikutnya akan bertambah secara berturut-turut.

Atribut global

<li> Tanda ini juga mendukung Atribut global HTML.

Atribut acara

<li> Tanda ini juga mendukung Atribut acara di HTML.

Pengaturan CSS standar

Sebagian besar peramban akan menampilkan nilai standar berikut ini <li> Elemen:

li {
  display: list-item;
}

Dukungan browser

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Dukungan Dukungan Dukungan Dukungan Dukungan