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ó thể có ký hiệu như dấu chấm, gạch ngang ... các phần tử.

Thẻ <li>

Mỗi phần tử trong một danh sách (<ul> hay <ol>) được biểu diễn bằng thẻ <li> (list item). Thẻ <li> chứa bất kỳ nội dung HTML nào trong nó, nó có thuộc tính value có thể gán bằng một số nguyên để thiết lập giá trị chỉ số khi nằm trong danh sách có thứ tự (xem ví dụ ở phần sau).

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

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

Đâ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 ...

Thiết lập chỉ số <ol> thuộc tính type và start

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, b, c ...)
• A : dùng chữ in để đánh chỉ số (A, B, C ...)
• i : hoặc I đánh theo số la mã (i, ii, iii ...)
• 1 : kiểu mặc định (dùng số 1,2,3,...)

Thuộc tính start của <ol> gán bằng số nguyên, để thiết lập giá trị chỉ số của phần tử đầu tiên, mặc định là 1 (phần tử tiếp theo tăng giá trị 1 đơn vị). Trong vị dụ sau, bạn thử thay đổi thuộc tính start và type để xem kết quả trực tiếp. Ngoài ra bạn cũng thử cho thuộc tính reversed, kể cả thử cho thuộc tính value của <li>

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 mặc định được đánh dấu đầu dòng bằng ký hiệu hình tròn. Thuộc tính type của <ul> cho phép thay đổi ký hiệu này bằng các giá trị: circle, disc hoặc square

Danh sách không có thứ tự <ul> này có thể dùng thẻ <menu> thay thế, hai thẻ này tương tự nhau trên trình duyệt.

Thuộc tính type của <ol> và <ul> nên hạn chế dùng, thay vào đó hãy sử dụng CSS để thiết lập thông tin này: Thuộc tính css: list-style