Danh sách là một phần rất phổ biến trong nội dung trang web. HTML cung cấp các thẻ để tạo danh sách dạng gạch đầu dòng, danh sách có thứ tự, và danh sách lồng nhau.
1. Các loại danh sách trong HTML
a) Danh sách không thứ tự (unordered list)
Dùng thẻ <ul> để tạo danh sách không có thứ tự, thường hiển thị bằng dấu chấm tròn.
<ul>
<li>Cơm</li>
<li>Phở</li>
<li>Bún</li>
</ul>
Kết quả:
- Cơm
- Phở
- Bún
b) Danh sách có thứ tự (ordered list)
Dùng thẻ <ol> để tạo danh sách có thứ tự, mặc định đánh số từ 1.
<ol>
<li>Thức dậy</li>
<li>Đánh răng</li>
<li>Ăn sáng</li>
</ol>Kết quả:
- Thức dậy
- Đánh răng
- Ăn sáng
c) Danh sách định nghĩa (ít dùng)
Gồm các cặp <dt> (tên thuật ngữ) và <dd> (giải thích).
<dl>
<dt>HTML</dt>
<dd>Ngôn ngữ đánh dấu siêu văn bản</dd>
</dl>
2. Các thuộc tính tùy chỉnh cho danh sách có thứ tự
Bạn có thể thay đổi kiểu số trong danh sách <ol>:
<ol type="A">
<li>Mục 1</li>
<li>Mục 2</li>
</ol>
type | Kết quả |
|---|---|
1 | 1, 2, 3, … (mặc định) |
A | A, B, C, … |
a | a, b, c, … |
I | I, II, III, … |
i | i, ii, iii, … |
3. Danh sách lồng nhau
Bạn có thể lồng danh sách con trong danh sách cha:
<ul>
<li>Món ăn chính
<ul>
<li>Cơm</li>
<li>Bún</li>
</ul>
</li>
<li>Tráng miệng</li>
</ul>
4. Thực hành
Tạo một file danhsach.html và thử đoạn mã sau:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Danh sách trong HTML</title>
</head>
<body>
<h1>Danh sách không thứ tự</h1>
<ul>
<li>Cà phê</li>
<li>Trà sữa</li>
<li>Nước cam</li>
</ul>
<h1>Danh sách có thứ tự</h1>
<ol type="i">
<li>Đọc sách</li>
<li>Viết blog</li>
<li>Luyện tập</li>
</ol>
<h1>Danh sách lồng nhau</h1>
<ul>
<li>Đồ ăn
<ul>
<li>Pizza</li>
<li>Mì Ý</li>
</ul>
</li>
<li>Đồ uống</li>
</ul>
</body>
</html>
5. Ghi nhớ
- Thẻ
<ul>dùng cho danh sách không thứ tự. - Thẻ
<ol>dùng cho danh sách có thứ tự. - Các mục trong danh sách đều phải đặt trong thẻ
<li>. - Có thể lồng danh sách nhiều cấp.
Thảo luận