Thẻ HTML <li>

Định nghĩa và cách sử dụng thẻ <li>

Thẻ <li> xác định một mục danh sách. Thẻ <li> được sử dụng bên trong danh sách có thứ tự (<ol>), danh sách không có thứ tự (<ul>) và trong danh sách menu (<menu>). Ví dụ,
một danh sách HTML có thứ tự (<ol>) và một danh sách không có thứ tự (<ul>):

<ol>
  <li>Cà phê</li>
  <li>Trà</li>
  <li>Sữa</li>
</ol>

<ul>
  <li>Cà phê</li>
  <li>Trà</li>
  <li>Sữa</li>
</ul>

Trong <ul> và <menu>, những mục danh sách thường được hiển thị với các dấu đầu dòng.

Trong <ol>, các mục danh sách thường được hiển thị bằng số hoặc chữ cái.

Mẹo: Hãy sử dụng CSS để tạo kiểu cho danh sách.

Hỗ trợ trình duyệt

Thuộc tính

Thuộc tính Global

Thẻ <li> cũng hỗ trợ các thuộc tính Global trong HTML.

Thuộc tính sự kiện

Thẻ <li> cũng hỗ trợ thuộc tính sự kiện trong HTML.

Các ví dụ khác

Sử dụng thuộc tính value trong danh sách có thứ tự:

<ol>
  <li value="100">Cà phê</li>
  <li>Trà</li>
  <li>Sữa</li>
  <li>Nước</li>
  <li>Nước ép</li>
  <li>Bia</li>
</ol>

Đặt các kiểu kiểu danh sách khác nhau (với CSS):

<ol>
  <li>Cà phê</li>
  <li style="list-style-type:lower-alpha">Trà</li>
  <li>Sữa</li>
</ol>

<ul>
  <li>Cà phê</li>
  <li style="list-style-type:square">Trà</li>
  <li>Sữa</li>
</ul>

Tạo danh sách bên trong danh sách (danh sách lồng nhau):

<ul>
  <li>Cà phê</li>
  <li>Trà
    <ul>
      <li>Trà đen</li>
      <li>Trà xanh</li>
    </ul>
  </li>
  <li>Sữa</li>
</ul>

Tạo một danh sách lồng nhau phức tạp hơn:

<ul>
  <li>Cà phê</li>
  <li>Trà
    <ul>
      <li>Trà đen</li>
      <li>Trà xanh
        <ul>
          <li>Trung Quốc</li>
          <li>Châu Phi</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>Sữa</li>
</ul>

Cài đặt CSS mặc định

Hầu hết mọi trình duyệt sẽ hiển thị phần tử <li> với các giá trị mặc định sau:

li {
  display: list-item;
}