Danh sách trong HTML cho phép bạn nhóm một tập hợp các đề mục có liên quan vào một nơi với các định dạng cụ thể để phân biệt với nội dung khác bao gồm: gạch đầu dòng, thụt vào một khoảng, thêm số thứ tự, …
Trong bài viết này, chúng ta sẽ tìm hiểu các thẻ tạo danh sách trong HTML.
Danh sách không theo thứ tự
Một danh sách không có thứ tự bắt đầu bằng thẻ <ul> và kết thúc bằng thẻ </ul>. Mỗi mục trong danh sách bắt đầu bằng thẻ <li> và kết thúc bằng thẻ </li>.
Các mục trong danh sách html sẽ được đánh dấu bằng dấu đầu dòng (vòng tròn nhỏ màu đen) theo mặc định.
Ví dụ:
See the Pen
Danh sách không thứ tự by Ken Halink (@kenhalink)
on CodePen.dark
Danh sách HTML có thứ tự
Một danh sách có thứ tự bắt đầu bằng thẻ <ol> và kết thúc bằng thẻ </ol>. Mỗi mục bên trong danh sách bắt đầu bằng thẻ <li> và kết thúc bằng thử </li>. Các mục trong danh sách sẽ được đánh dấu bằng số thứ tự theo mặc định.
Xem ví dụ:
See the Pen
Danh sách có thứ tự by Ken Halink (@kenhalink)
on CodePen.dark
>> HTML là gì?
Danh sách HTML có thứ tự bằng chữ cái hoặc số la mã
Đôi khi danh sách của bạn có nhiều cấp bậc khác nhau, và bạn muốn bắt đầu chúng theo thứ tự bằng chữ cái hoặc số la mã. Chúng ta chỉ cần thêm vào thẻ mở <ol> đoạn khai báo sau:
- type=”A” – bắt đầu với ký tự A, B, C, …
- type=”a” – bắt đầu với ký tự a,b,c, …
- type=”I” – bắt đầu với số la mã I, II, III, …
- type=”i” – bắt đầu với số la mã i, ii, iii, …
Xét các ví dụ:
See the Pen
Danh sách thứ tự theo số la mã by Ken Halink (@kenhalink)
on CodePen.dark
Danh sách mô tả HTML
HTML cũng hỗ trợ danh sách mô tả. Danh sách mô tả là danh sách các đầu mục, với mô tả của từng đầu mục nằm bên dưới nó.
Dùng thẻ <dl> định nghĩa danh sách mô tả, thẻ <dt> định nghĩa đầu mục, và các thẻ <dd> để mô tả từng đầu mục đó.
Ví dụ:
See the Pen
Danh sách mô tả by Ken Halink (@kenhalink)
on CodePen.dark
Tóm lại
Các thẻ tạo danh sách khi học HTML bao gồm:
Thẻ | Định nghĩa |
<ul> | Tạo danh sách không có thứ tự |
<ol> | Tạo danh sách theo thứ tự |
<li> | Liệt kê các thành phần của danh sách |
<dl> | Tạo danh sách mô tả |
<dt> | Định nghĩa đầu mục danh sách mô tả |
<dd> | Nội dung mô tả các đầu mục |