HTML/CSS | Thẻ ul và ol

Học HTML, CSS từ Zero Tới Hero

• Thẻ ul
• Thẻ ol
• Thẻ li
• Styles và Semantic

Các thẻ nhắc tới trong chương này các bạn cũng đã được làm quen trong bài Các thẻ HTML thông dụng tại chương học trước. Trong chương này, chúng ta sẽ tìm hiểu sâu hơn về các tình huống sử dụng của các thẻ này nhé.

Thẻ ul

Thẻ ul (unordered list, ý nghĩa: “danh sách không có thứ tự”) dùng để thể hiện một danh sách mà số thứ tự trong đó không quan trọng.

Ví dụ, ở bài học về HTML Semantic mình có liệt kê một số ví dụ về các thẻ HTML mang ngữ nghĩa như sau.

Sử dụng thẻ <ul> trong tình huống các mục trong danh sách không quan trọng việc phải có số thứ tự.

Sử dụng thẻ <ul> cho những tình huống thay đổi thứ tự các mục trong danh sách cũng không gây ảnh hưởng nhiều tới nội dung.

Thẻ ol

Thẻ ol (ordered list, ý nghĩa: “danh sách có thứ tự”) dùng để thể hiện một danh sách mà số thứ tự trong đó mang lại ý nghĩa, hoặc có quan trọng số thứ tự.

Thẻ li

Thẻ li (list item, ý nghĩa: “mục trong danh sách”) được dùng làm thẻ con trong thẻ <ul> hoặc <ol>.

Styles và Semantic

Tương tự như những thẻ HTML chúng ta đã học, CSS có thể thay đổi styles của thẻ <ul> và <ol> từ danh sách “có thứ tự” có thể trở thành “không có thứ tự” và ngược lại. Vậy tại sao chúng ta phải cân nhắc nên dùng thẻ nào? Đó chính là bởi yếu tố ngữ nghĩa (HTML Semantic).

Tóm tắt

• Thẻ ul (unordered list, ý nghĩa: “danh sách không có thứ tự”) dùng để thể hiện một danh sách mà số thứ tự trong đó không quan trọng.
• Thẻ ol (ordered list, ý nghĩa: “danh sách có thứ tự”) dùng để thể hiện một danh sách mà số thứ tự trong đó mang lại ý nghĩa, hoặc có quan trọng số thứ tự.
• Thẻ li (list item, ý nghĩa: “mục trong danh sách”) được dùng làm thẻ con trong thẻ <ul> hoặc <ol>.
• CSS có thể thay đổi styles của thẻ <ul> và <ol> từ danh sách “có thứ tự” có thể trở thành “không có thứ tự” và ngược lại. Chúng ta phải cân nhắc nên dùng thẻ nào bởi vì yếu tố ngữ nghĩa.