Tiếp các bài về kiến thức về HTML, để giúp các bạn thiết kế web tốt hơn hôm nay chúng ta sẽ cùng chia sẻ cách sử dụng thẻ xác định danh sách trong HTML.

Các thẻ danh sách

Danh sách là một tập hợp từ 2 mục (item) trở lên, các mục này phải có cùng tính chất, cùng hướng về một nội dung giống nhau.

_ Danh sách có cấu trúc nằm ngang hay chiều dọc đều có tính chất như nhau, việc định dạng chiều ngang hay chiều dọc do CSS quản lý, không liên quan đến HTML/XHTML, nhiệm vụ của HTML/XHTML chỉ giúp trình duyệt xác định rõ ý nghĩa của các thẻ, điều này rất quang trọng cho SEO.

2 danh sách sau đây là tương đương nhau về mặt ý nghĩa HTML/XHTML:

Hoa hồng

Hoa lan

Và:

Hoa hồng, Hoa lan

Các loại danh sách

Danh sách có thứ tự:
Là danh sách có sử dụng số, chữ, hay những ký tự biểu diễn thứ tự, danh sách này sử dụng cặp thẻ: <ol></ol> và <li></li> để diễn đạt.

● VD1 danh sách về thức uống:

1. Cafe đá
2. Cafe sữa
3. Sinh tố
4. Nước cam.

● VD2 danh sách về công nghệ di động:

a) Laptop, b) iphone, c) ipad, d) kindle, e) palm.

Danh sách không có thứ tự:
Là danh sách có nhiều mục tương đương nhau, không sử dụng số, chữ hay những ký tự biểu diễn thứ tự, danh sách này sử dụng cặp thẻ: <ul></ul> và <li></li> để diễn đạt.

Xem thêm:  Top 5 trang rút gọn link miễn phí không quảng cáo tốt nhất hiện nay.

● VD1 danh sách về thức uống:

Cafe đá
Cafe sữa
Sinh tố
Nước cam.

● VD2 danh sách về công nghệ di động:

Laptop, iphone, ipad, kindle, palm.

Danh sách có các mục và dòng nội dung mô tả các mục:
Là danh sách có các mục và có nội dung mô tả các mục đó, danh sách này sử dụng 1 bộ gồm 3 thẻ: <dl></dl>, <dt></dt> và <dd></dd> để diễn đạt.

● VD1 danh sách về các chất cần cho cơ thể:

Trái cây: giúp bỗ sung vitamin cho cơ thể.
Nước: giúp chúng ta tăng cường lượng nước cần cho cơ thể.
Thịt: giúp cơ thể tăng cường đạm, và chất béo.

● VD2 danh sách về các ngày kỷ niệm:

30/4/2012: Kỷ niệm ngày giải phóng Miền Nam thống nhất đất nước.
1/5/2012: Ngày quốc tế lao động.
1/6/2012: Ngày quốc tế thiếu nhi.

Thẻ xác định danh sách

Thẻ xác định danh sách (có đề mục và mô tả đề mục) là một bộ gồm 3 thẻ:

  • <dl></dl> viết tắt của chữ “definition list” có nghĩa là sự xác định (hay định nghĩa) danh sách.
  • <dt></dt> viết tắt của chữ “defines an item” có nghĩa là xác định (hay định nghĩa) một mục.
  • <dd></dd> viết tắt của chữ “defines describe an item” có nghĩa là xác định (hay định nghĩa) một mô tả của một mục.

Thẻ xác định danh sách sử dụng cho danh sách có các mục và có nội dung mô tả cho các mục, không sử dụng cho danh sách không có phần nội dung mô tả.

Xem thêm:  Website Responsive - Xu hướng thiết kế web trong thời đại mới

1e

2e

Cấu trúc và cách dùng

Cấu trúc thẻ xác định danh sách phải theo các nguyên tắc sau đây:

  • Lúc nào cũng phải tồn tại 3 thẻ, không thể thiếu một trong 3: <dl></dl>, <dt></dt>, <dd></dd>.
  • Bên trong thẻ <dt></dt> chỉ chứa được các thẻ thuộc nhóm inline.
  • Bên trong thẻ <dd></dd> 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>.
  • Thẻ <dt></dt> và <dd></dd> phải được viết trực tiếp bên trong <dl></dl>:

3e

  • Bên trong thẻ <dl></dl> chỉ chứa trực tiếp thẻ <dt></dt> và <dd></dd>, 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:

4e

Xem thêm:

Xem thêm:  5 cách gia tăng lượt đăng ký bản tin cho website của bạn

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