Cách sử dụng Danh sách HTML (

,
,

)

Trong HTML có 3 loại phần tử danh sách:

• Danh sách không có thứ tự (phổ biến nhất)
• Danh sách có thứ tự
• Danh sách mô tả

Danh sách không theo thứ tự

Danh sách không có thứ tự được xác định bằng <ul> và mỗi mục danh sách bên trong được xác định bằng <li> phần tử:

<ul>
  <li>Apple</li>
  <li>Banana</li>
  <li>Orange</li>
</ul>

Kết quả:

• Apple
• Chuối
• Màu cam

Theo mặc định, danh sách không có thứ tự được tạo kiểu bằng dấu đầu dòng hình tròn, nhưng điều này có thể được tùy chỉnh bằng CSS.

Danh sách có thứ tự

Danh sách có thứ tự được xác định bằng <ol> và mỗi mục danh sách bên trong được xác định bằng <li> phần tử:

<ol>
  <li>Apple</li>
  <li>Banana</li>
  <li>Orange</li>
</ol>

Kết quả:

1. Apple
2. Chuối
3. Màu cam

Theo mặc định, danh sách có thứ tự được hiển thị bằng số, nhưng điều này có thể được tùy chỉnh bằng CSS.

Danh sách mô tả

Danh sách mô tả hoạt động khác rất nhiều so với danh sách có thứ tự và không có thứ tự.

Đây là cách chúng hoạt động:

• <dl> phần tử xác định danh sách mô tả (và là phần tử mẹ).
• <dt> phần tử xác định các thuật ngữ (tên) bên trong danh sách mô tả (và là phần tử con của <dl> phần tử).
• <dd> phần tử cung cấp mô tả, định nghĩa hoặc giá trị cho thuật ngữ danh sách mô tả (<dt> ) xuất hiện ngay trước nó (và cũng là con của <dl> phần tử).

Ví dụ:

<dl>
  <dt>African Elephant</dt>
  <dd>The worlds largest living land animal.</dd>
  <dt>Giraffe</dt>
  <dd>The tallest living animal on Earth.</dd>
  <dt>Blue Whale</dt>
  <dd>The largest animal ever (as we know it).</dd>
</dl>

Kết quả:

Voi châu Phi

Động vật sống trên cạn lớn nhất thế giới.

Con hươu cao cổ

Động vật sống cao nhất trên Trái đất.

Cá voi xanh

Con vật lớn nhất từ ​​trước đến nay (như chúng ta biết).

Danh sách mô tả hiếm khi được sử dụng trong HTML hiện đại. Trường hợp sử dụng phổ biến nhất mà tôi đã thấy là để tạo một số loại bảng thuật ngữ hoặc để hiển thị siêu dữ liệu - tuy nhiên, có nhiều cách khác để thực hiện điều đó trong HTML.