1. Trang chủ
  2. Tin tức
  3. Kiến thức về HTML (P14): Thẻ xác định danh sách trong HTML

Kiến thức về HTML (P14): 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.

● 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ả.

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:

  • Kiến thức về HTML (P1): Giới thiệu HTML và tạo trang web bằng HTML
  • Kiến thức về HTML (P2): HTML Elements
  • Kiến thức về HTML (P3): Hướng dẫn tạo bảng HTML
  • Kiến thức về HTML (P4): Tag mới trong HTML
  • Kiến thức về HTML (P5): Đơn vị trong HTML và CSS
  • Kiến thức về HTML (P6): HTML Symbols-mã kí tự chữ
  • Kiến thức về HTML (P7): HTML Symbols-mã kí tự số
  • Kiến thức về HTML (P8): Thẻ định dạng tiêu đề
  • Kiến thức về HTML (P9): Thẻ định dạng đoạn văn bản
  • Kiến thức về HTML (P10): Thẻ phân chia khu vực
  • Kiến thức về HTML (P11): Thẻ <!Doctype> và HTML/XHTML theo giá trị DTD
  • Kiến thức về HTML (P12): Cách tạo và hiển thị một file HTML
  • Kiến thức về HTML (P13): Cấu trúc cơ bản của HTML
X