Thẻ danh sách HTML dùng để tạo các danh sách trên trang web. Có ba loại chính: danh sách có thứ tự (ordered), không thứ tự (unordered) và danh sách mô tả (description).
Khi xây dựng trang web, bạn thường cần trình bày thông tin dưới dạng danh sách: danh sách tên học sinh, bài viết blog, các bước thực hiện...
HTML cung cấp sẵn các thẻ để tạo danh sách. Hướng dẫn này giới thiệu ba loại danh sách và cách triển khai.
Các Loại Danh Sách HTML
Danh sách có thứ tự (Ordered list): Dùng khi thứ tự các mục quan trọng (ví dụ: các bước hướng dẫn). Được đánh số tự động.Danh sách không thứ tự (Unordered list): Dùng khi thứ tự không quan trọng, hiển thị với dấu chấm (bullet).Danh sách mô tả (Description list): Dùng để trình bày cặp thuật ngữ - định nghĩa.
Danh sách có thể đặt ở bất kỳ đâu trong trang, thậm chí lồng nhau (nested list).
Danh Sách Có Thứ Tự (<ol>)
Sử dụng thẻ <ol> bao quanh, mỗi mục dùng <li>. Ví dụ công thức làm bánh:
<ol> <li>Trộn 100g bột, 2 trứng, 300ml sữa, 1 thìa dầu.</li> <li>Để nghỉ 30 phút.</li> <li>Đổ vào chảo nóng, chiên mỗi mặt 1 phút.</li> </ol>
Mặc định bắt đầu từ 1. Để bắt đầu từ số khác, dùng thuộc tính start:
<ol start="5"> <li>Bước 5...</li> <li>Bước 6...</li> </ol>
Danh Sách Không Thứ Tự (<ul>)
Dùng thẻ <ul> và <li>. Ví dụ danh sách tên:
<ul> <li>An</li> <li>Bình</li> <li>Cường</li> </ul>
Danh Sách Mô Tả (<dl>, <dt>, <dd>)
Dùng cho cặp tên - mô tả. <dl> bao quanh, <dt> là thuật ngữ, <dd> là định nghĩa.
<dl> <dt>Hạng Phổ Thông</dt> <dd>Ghế tiêu chuẩn, không phục vụ bữa ăn.</dd> <dt>Hạng Thương Gia</dt> <dd>Ghế cao cấp, có bữa ăn cao cấp.</dd> </dl>
Kết quả: thuật ngữ in đậm, định nghĩa thụt lề bên dưới.
Kết Luận
Danh sách là công cụ thiết yếu để trình bày thông息 có cấu trúc. Bài viết đã trình bày ba loại: ordered (<ol> <li>), unordered (<ul> <li>), description (<dl> <dt> <dd>). Bây giờ bạn có thể tạo danh sách HTML như một chuyên gia!