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

Định nghĩa

Định nghĩa danh sách trong HTML/HTML5 có nhiều dạng khác nhau, mỗi dạng sẽ theo một cấu trúc thẻ khác nhau, do đó việc hiểu rõ danh sách rất quan trọng, nếu bạn chưa nắm rõ cách định nghĩa về danh sách thì bạn không thể hiểu hết được bài học này, xin hãy xem trước định nghĩa về danh sách trong HTML/HTML5.

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

HTML viết

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8" />
<title>Tiêu đề trang web</title>
</head>

<body>
<dl>
<dt>Trái cây:</dt>
<dd>giúp bỗ sung vitamin cho cơ thể.</dd>

<dt>Nước:</dt>
<dd>giúp chúng ta tăng cường lượng nước cần cho cơ thể.</dd>

<dt>Thịt:</dt>
<dd>giúp cơ thể tăng cường đạm, và chất béo.</dd>
</dl>
</body>
</html>

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

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.

Xem thêm ví dụ

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/HTML5, 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>:

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:

Những cấu trúc không nên sử dụng

Những cấu trúc dưới đây tuy hiển thị tốt cho trình duyệt, nhưng lại không đúng ý nghĩa của bộ 3 thẻ <dl></dl>, <dt></dt>, <dd></dd>, sẽ khiến cho trình duyệt lúng túng trong việc xác định thẻ.

Cấu trúc thiếu vắng <dt></dt>: thiếu mục.

Cấu trúc thiếu vắng <dd></dd>: thiếu mô tả mục.

Cấu trúc lặp nhiều <dt></dt> cùng lúc: nhiều mục, nhưng thiếu mô tả.

Cấu trúc lặp nhiều <dd></dd> cùng lúc: Không cần phải phân nhiều mô tả cho một mục, chỉ cần viết tất cả mô tả trong một <dd></dd> là được.

Cấu trúc lồng <dl></dl> bên trong <dl></dl> khác: Cấu trúc này rườm rà khó điều khiển, ta nên sử dụng cấu trúc <div></div> và <hx></hx> kết hợp <dl></dl> thay thế.

Cấu trúc trên ta thay thế như sau:

Tham khảo thêm

Thẻ phân chia khu vực

Thẻ danh sách có thứ tự và không thứ tự