Trong HTML, danh sách (list) được sử dụng để trình bày một chuỗi các mục có liên quan với nhau một cách có cấu trúc và dễ đọc. Thay vì hiển thị thông tin dưới dạng các đoạn văn bản dài, danh sách giúp người xem nắm bắt thông tin một cách nhanh chóng và hiệu quả hơn. HTML cung cấp ba loại danh sách chính, mỗi loại phù hợp với các mục đích hiển thị khác nhau.
Phân biệt các loại danh sách (list)
HTML cung cấp ba loại danh sách chính, được phân biệt dựa trên cách các mục được đánh dấu và ý nghĩa của thứ tự các mục:
- Danh sách không có thứ tự (Unordered List): Loại danh sách này được sử dụng khi thứ tự của các mục không quan trọng. Các mục trong danh sách thường được đánh dấu bằng các ký hiệu như dấu chấm tròn, hình vuông hoặc hình tròn rỗng.
- Danh sách có thứ tự (Ordered List): Loại danh sách này được sử dụng khi thứ tự của các mục có ý nghĩa quan trọng. Các mục trong danh sách được đánh số hoặc đánh chữ cái theo một trình tự nhất định.
- Danh sách định nghĩa (Description List): Loại danh sách này được sử dụng để hiển thị các thuật ngữ và định nghĩa tương ứng của chúng. Mỗi mục trong danh sách bao gồm một thuật ngữ và một hoặc nhiều định nghĩa liên quan.
Mô tả các loại danh sách (list)
Dưới đây là mô tả chi tiết và ví dụ cụ thể cho từng loại danh sách trong HTML:
Danh sách không có thứ tự (Unordered List) – <ul>
Mô tả:
Thẻ <ul> (viết tắt của “unordered list”) được sử dụng để tạo một danh sách mà thứ tự của các mục không quan trọng. Mỗi mục trong danh sách không có thứ tự được đặt bên trong thẻ <li> (viết tắt của “list item”). Theo mặc định, các trình duyệt thường hiển thị các mục trong danh sách không có thứ tự với dấu chấm tròn ở phía trước. Tuy nhiên, bạn có thể thay đổi kiểu đánh dấu này bằng cách sử dụng CSS.
Ví dụ sau cho kết quả:
Giải thích:
- Thẻ <ul> bao bọc toàn bộ danh sách không có thứ tự.
- Mỗi thẻ <li> đại diện cho một mục trong danh sách (trong trường hợp này là tên các loại trái cây).
- Khi hiển thị trên trình duyệt, các loại trái cây sẽ được liệt kê với dấu chấm tròn ở phía trước mỗi tên.
Tùy chỉnh kiểu đánh dấu bằng CSS:
Bạn có thể sử dụng thuộc tính list-style-type trong CSS để thay đổi kiểu đánh dấu mặc định của danh sách không có thứ tự.
Ví dụ sau cho kết quả:
Danh sách có thứ tự (Ordered List) – <ol>
Mô tả:
Thẻ <ol> (viết tắt của “ordered list”) được sử dụng để tạo một danh sách mà thứ tự của các mục là quan trọng. Tương tự như danh sách không có thứ tự, mỗi mục trong danh sách có thứ tự cũng được đặt bên trong thẻ <li>. Theo mặc định, các trình duyệt thường đánh số các mục trong danh sách có thứ tự bằng các chữ số Ả Rập (1, 2, 3,…). Tuy nhiên, bạn có thể thay đổi kiểu đánh số này bằng cách sử dụng các thuộc tính của thẻ <ol> hoặc thông qua CSS.
Ví dụ sau cho kết quả:
Giải thích:
- Thẻ <ol> bao bọc toàn bộ danh sách có thứ tự.
- Mỗi thẻ <li> đại diện cho một bước trong quy trình.
- Khi hiển thị trên trình duyệt, các bước sẽ được đánh số theo thứ tự (1, 2, 3).
Tùy chỉnh kiểu đánh số bằng thuộc tính của <ol>
Thẻ <ol> cung cấp một số thuộc tính để thay đổi kiểu đánh số:
- type=”1″ (mặc định): Đánh số bằng chữ số Ả Rập (1, 2, 3,…).
- type=”a”: Đánh số bằng chữ cái thường (a, b, c,…).
- type=”A”: Đánh số bằng chữ cái in hoa (A, B, C,…).
- type=”i”: Đánh số bằng chữ số La Mã thường (i, ii, iii,…).
- type=”I”: Đánh số bằng chữ số La Mã in hoa (I, II, III,…).
- start=”n”: Chỉ định số hoặc chữ cái bắt đầu của danh sách
(ví dụ: start=”3″ hoặc start=”c”).
Ví dụ về tùy chỉnh kiểu đánh số:
Tùy chỉnh kiểu đánh số bằng CSS:
Tương tự như danh sách không có thứ tự, bạn cũng có thể sử dụng thuộc tính list-style-type trong CSS để tùy chỉnh kiểu đánh số cho danh sách có thứ tự. Các giá trị phổ biến bao gồm decimal (mặc định), lower-alpha, upper-alpha, lower-roman, upper-roman, v.v.
Danh sách định nghĩa (Description List) – <dl>, <dt>, <dd>
Mô tả:
Thẻ <dl> (viết tắt của “description list”) được sử dụng để tạo một danh sách các thuật ngữ và định nghĩa tương ứng của chúng. Mỗi mục trong danh sách định nghĩa bao gồm:
- <dt> (viết tắt của “description term”): Chứa thuật ngữ cần định nghĩa.
- <dd> (viết tắt của “description details”): Chứa định nghĩa của thuật ngữ đó.
Một thẻ <dl> có thể chứa nhiều cặp thẻ <dt> và <dd>.
Ví dụ sau cho kết quả:
Giải thích:
- Thẻ <dl> bao bọc toàn bộ danh sách định nghĩa.
- Thẻ <dt> định nghĩa một thuật ngữ (ví dụ: HTML, CSS, JavaScript).
- Thẻ <dd> cung cấp định nghĩa cho thuật ngữ đứng ngay trước nó. Một thuật ngữ có thể có nhiều thẻ <dd> đi kèm.
Ứng dụng của danh sách định nghĩa:
- Hiển thị các thuật ngữ và định nghĩa (như từ điển).
- Trình bày các cặp khóa-giá trị.
- Hiển thị các câu hỏi và câu trả lời.
Tổng kết
| Loại danh sách | Thẻ chính | Khi nào dùng? |
|---|---|---|
| Unordered List | <ul> | Khi không quan trọng thứ tự các mục |
| Ordered List | <ol> | Khi cần thể hiện thứ tự, quy trình |
| Definition List | <dl> | Khi cần trình bày thuật ngữ và định nghĩa |
Giảng viên Cao Đăng Khoa
Bộ môn Công nghệ thông tin
FPT Polytechnic TP HCM
