Thẻ HTML <ul>

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

Thẻ <ul> định nghĩa danh sách không có thứ tự (có dấu đầu dòng). Ví dụ về danh sách HTML không có thứ tự:

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

Sử dụng thẻ <ul> cùng với thẻ <li> để tạo danh sách không có thứ tự.

Hỗ trợ trình duyệt

Thuộc tính Global

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

Thuộc tính sự kiện

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

Các ví dụ khác

Thiết lập các kiểu danh sách khác nhau (với CSS):

<ul style="list-style-type:circle">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

<ul style="list-style-type:disc">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

<ul style="list-style-type:square">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

Mở rộng và giảm chiều cao dòng trong danh sách (bằng CSS):

<ul style="line-height:180%">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

<ul style="line-height:80%">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

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

<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ul>

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

<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>

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

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

ul {
  display: block;
  list-style-type: disc;
  margin-top: 1em;
  margin-bottom: 1 em;
  margin-left: 0;
  margin-right: 0;
  padding-left: 40px;
}