Để thiết kế web tốt hơn, chúng ta sẽ tìm hiểu thẻ danh sách có thứ tự và không có thứ tự trong bài hôm nay nhé.

Danh sách có thứ tự

Để thể hiện danh sách có thứ tự ta sử dụng cặp thẻ: <ol></ol> và <li></li>, trong đó:

  • <ol></ol> là viết tắt của chữ “ordered list” có nghĩa là danh sách có thứ tự.
  • <li></li> viết tắt của chữ “list item” có nghĩa là mục của danh sách.

Danh sách sau đây gọi là danh sách có thứ tự:

1s

HTML viết

2S

Hiển thị trình duyệt:

3S

 

Danh sách không có thứ tự

Để thể hiện danh sách không có thứ tự ta sử dụng cặp thẻ: <ul></ul> và <li></li>, trong đó:

  • <ul></ul> là viết tắt của chữ: unordered list có nghĩa là danh sách không có thứ tự
  • <li></li> viết tắt của chữ: list item có nghĩa là mục của danh sách.

Danh sách sau đây gọi là danh sách không có thứ tự:

1R

HTML viết

2R

Hiển thị trình duyệt:

3R

Cấu trúc thẻ danh sách có thứ tự và không có thứ tự

Cấu trúc thể hiện thẻ danh sách có thứ tự và không có thứ tự là tương tự nhau.

Xem thêm:  Thiết kế web bằng Drupal – Tiên tiến, Hiện đại, An toàn

Cấu trúc phải theo các nguyên tắc sau đây:

  • Lúc nào cũng phải tồn tại 1 cặp thẻ, không thể thiếu một trong 2:
    • Đối với danh sách có thứ tự, phải tồn tại cặp thẻ: <ol></ol>, <li></li>.
    • Đối với danh sách không có thứ tự, phải tồn tại cặp thẻ: <ul></ul>, <li></li>.
  • Bên trong thẻ <ol></ol> (hoặc <ul></ul>) chỉ chứa trực tiếp một thẻ duy nhất <li></li>.
  • Bên trong thẻ <li></li> chứa được hầu hết các thẻ HTML/XHTML, tuy nhiên không được chứa một số thẻ sau đây: <html></html>, <meta></meta>, <body></body>, <title></title>, <link></link>. Và một số thẻ không nên chứa như: <style></style>, <script></script>.

5R

  • Bên trong thẻ <ol></ol> (hoặc <ul></ul>) chỉ chứa trực tiếp thẻ <li></li>, không được xen kẻ bất kỳ thẻ nào khác, những cấu trúc như bên dưới đây là sai, không đúng chuẩn W3C:

6R

Một số cấu trúc của danh sách có thứ tự và không có thứ tự

Cấu trúc <ol></ol> lồng bên trong <ol></ol>

HTML viết

7R

Hiển thị trình duyệt:

8R

Cấu trúc <ul></ul> lồng bên trong <ul></ul>

HTML viết

10R

Hiển thị trình duyệt:

11R

Cấu trúc <ul></ul> lồng bên trong <ol></ol>

HTML viết

12R

Hiển thị trình duyệt:

13R

Xem thêm:

Xem thêm:  Kiến thức về CSS (P5): Thuộc tính color

BÀI VIẾT LIÊN QUANXEM NHIỀU HƠN TỪ TÁC GIẢ NÀY