Thẻ <ol> và <ul> tạo danh sách HTML

Danh dách trong HTML, phần tử <li>

Danh sách là một tập hợp các phần tử (ví dụ danh sách các học sinh, các món ăn, các môn học ...). Có hai loại danh sách, danh sách có thứ tự và không có thứ tự.

• Danh sách có thứ tự (ordered list) được tạo ra bằng thẻ <ol>, mỗi phần tử khi xuất hiện có chỉ số ở đầu (1,2, 3 ... A, B, C ...)
• Danh sách không có thứ tự (unordered list) được tạo ra bằng thẻ <ul>, mỗi phần tử khi xuất hiện có ký hiệu như dấu chấm, gạch ngang ... ở đầu.

Mỗi phần tử trong <ul> hay <ol> được tạo ra bằng bằng thẻ <li> ở bên trong

Thẻ <ol> tạo danh sách có thứ tự

Để tạo danh sách có thứ tự sử dụng thẻ <ol> (ordered list), và mỗi phần tử trong danh sách được định nghĩa bằng thẻ <li> bên trong.

Đây là một ví dụ về danh sách có thứ tự:

<ol>
    <li>HTML</li>
    <li>CSS</li>
    <li>Javascript</li>
    <li>C#</li>
</ol>

Kết quả:

1. HTML
2. CSS
3. Javascript
4. C#

Các phần tử trong danhh sách ol tự động được đánh chỉ số : 1, 2, 3 ...

Thuộc tính type của <ol> gán bằng 1, a, A, i để thiết lập một số kiểu đánh số:

• a dùng chữ thường để đánh chỉ số
• A chữ in của bảng chữ cái (bắt đầu từ A) để đánh chỉ số
• i hoặc I đánh theo số la mã
• 1 kiểu mặc định (dùng số 1,2, ...)

Thuộc tính start của <ol> để thiết lập giá trị bắt đầu đánh số

Thuộc tính reversed bằng true thì chỉ số đánh từ lớn xuống nhỏ.

Thẻ <ul> tạo danh sách không có thứ tự

Cách tạo danh sách không có thứ tự tương tự như tạo danh sách có thứ tự chỉ thay thẻ <ol> bằng thẻ <ul> (unordered list)

Đây là một ví dụ về danh sách không có thứ tự:

<ul type="circle">
    <li>HTML</li>
    <li>CSS</li>
    <li>Javascript</li>
    <li>C#</li>
</ul>

Kết quả:

• HTML
• CSS
• Javascript
• C#

Các phần tử trong danhh sách ul được đánh dấu đầu dòng bằng ký hiệu hình tròn

Thuộc tính type của <ul> để thiết lập ký hiệu đầu mỗi phần tử có thể nhận các giá trị circle, disc, square