Các loại danh sách (Lists) trong HTML

Có ba loại danh sách có mặt trong tài liệu HTML là danh sách không có thứ tự (unordered), danh sách có thứ tự (ordered) và danh sách mô tả (description).

Danh sách không có thứ tự (Unordered HTML list)

Được định nghĩa bằng thẻ <ul> nơi mỗi mục danh sách được bao quanh bởi thẻ <li>.

Cú pháp

Cú pháp như sau:

<ul> <li>Mục danh sách</li> <li>Mục danh sách</li> <li>Mục danh sách</li> </ul>

Danh sách có thứ tự (Ordered HTML list)

Được định nghĩa bằng thẻ <ol> nơi mỗi mục danh sách được bao quanh bởi thẻ <li>.

Cú pháp

Cú pháp như sau:

<ol> <li>Mục danh sách</li> <li>Mục danh sách</li> <li>Mục danh sách</li> </ol>

Danh sách mô tả (Description HTML list)

Được định nghĩa bằng thẻ <dl> nơi mỗi thuật ngữ định nghĩa được bao quanh bởi thẻ <dt> và mỗi mô tả được bao quanh bởi thẻ <dd>.

Cú pháp

Cú pháp như sau:

<dl> <dt>thuật ngữ định nghĩa</dt> <dd>mô tả thuật ngữ</dd> <dt>thuật ngữ định nghĩa</dt> <dd>mô tả thuật ngữ</dd> </dl>

Ví dụ

Dưới đây là ví dụ minh họa các danh sách HTML:

<!DOCTYPE html>
<html>
<style>
  body {
    color: #000;
    height: 100vh;
    background-color: #8BC6EC;
    background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);
  }
</style>
<body>
<h1>Demo các danh sách HTML</h1>
<h3>Danh sách không có thứ tự</h3>
<ul>
  <li>Môn Vật lý</li>
  <li>Môn Hóa học</li>
  <li>Môn Kinh tế</li>
</ul>
<h3>Danh sách có thứ tự</h3>
<ol>
  <li>Sách Vật lý Phần 1</li>
  <li>Sách Vật lý Phần 2</li>
  <li>Sách Vật lý Phần 3</li>
</ol>
<h3>Danh sách mô tả</h3>
<dl>
  <dt>Sách Vật lý</dt>
  <dd>- Bao gồm vật lý hiện đại và vật lý lượng tử</dd>
  <dt>Sách Hóa học</dt>
  <dd>- Bao gồm hóa hữu cơ, vô cơ và lý thuyết</dd>
</dl>
</body>
</html>

Kết quả