HTML5: <dl> & <dt> & <dd>

Tổng quan

Thẻ <dl> (Description List) dùng làm nơi đặt một danh sách mô tả bao gồm các cặp thuật ngữ và mô tả cụ thể cho thuật ngữ, trong đó thuật ngữ được đặt trong thẻ <dt> và mô tả được đặt trong thẻ <dd>. Ngoài ra <dl> cũng được dùng để hiển thị siêu dữ liệu (một danh sách các cặp key/value).

Trước HTML5, <dl> được hiểu là Definition List.

Thẻ <dt> (Description Term) dùng làm nơi đặt thuật ngữ; <dt> chỉ có thể là con của <dl>. Trong một <dl> ta có thể dùng nhiều <dt>.

Thẻ <dd> dùng làm nơi đặt mô tả; <dt> chỉ có thể là con của <dt>. Trong một <dl> ta có thể dùng nhiều <dd>.

Nhóm nội dung

Đối với thẻ <dl>: Flow; nếu con của <dl> chỉ là một cặp name/value thì <dl> còn thuộc nhóm nội dung Palpable.

Đối với thẻ <dt> và <dd>: Không thuộc nhóm nội dung nào.

Nội dung được phép

Đối với thẻ <dl>: Các thẻ <dt>, và bên trong mỗi thẻ <dt> là các thẻ <dd>.

Đối với thẻ <dt>: Flow; nếu không có các thẻ <header> và <footer> thì <dt> cho phép các nội dung thuộc các nhóm nội dung Sectioning và Heading.

Đối với thẻ <dd>: Flow.

Thẻ đóng

Đối với thẻ <dl>: Cần phải có thẻ mở <dl> và thẻ đóng </dl>.

Đối với thẻ <dt>: Phải có thẻ mở <dt>, nếu nó chứa ít nhất một thẻ <dd> thì có thể bỏ qua thẻ đóng </dt>

Đối với thẻ <dd>: Phải có thẻ mở <dd>, nếu ngay sau nó là một thẻ <dd> khác thì có thể bỏ qua thẻ đóng </dd>

Phần tử cha được phép

Thẻ <dl>: Bất kỳ phần tử nào chấp nhận nhóm nội dung Flow.

Thẻ <dt> và <dd>: <dl>.

DOM interface

<dl>: HTMLDListElement.

<dt> và <dd>: HTMLElement, HTMLSpanElement.

Thuộc tính

<dl>, <dt> và <dd> đều bao gồm Các thuộc tính Global.

compact

Đây là thuộc tính của <dl>, dùng để hiển thị thuật ngữ và mô tả thuật ngữ trên cùng một dòng. Hiện tại thuộc tính này không còn được hỗ trợ.

Ví dụ

Một thuật ngữ và một mô tả:

Kết quả:

HDJ
        HTML - DHTML (CSS) - JavaScript

Một thuật ngữ và nhiều mô tả:

Kết quả:

RDBMS
        Relational DataBase Management System.
        Hệ quản trị cơ sở dữ liệu quan hệ.

Nhiều thuật ngữ và một mô tả:

Kết quả:

HTML
CSS
JavaScript
jQuery
Ajax
         Những ngôn ngữ cần thiết cho việc thiết kế website.

Siêu dữ liệu (metadata):

Gợi ý: Nếu bạn muốn đặt một dấu phân cách (ví dụ như dấu hai chấm ':') giữa key và value ta có thể làm như sau:

Kết quả của phần metadata ở trên sẽ là:

Tên:
        V1Study
Ra đời:
        2015
Đất nước:
        Việt Nam
Màu đặc trưng:
        Xanh lá

Lưu ý

Không sử dụng thẻ <dl> (cũng như là thẻ <ul>) chỉ để nhằm mục đích tạo hiệu ứng thụt đầu dòng trong trang web; thay vào đó ta có thể sử dụng thuộc tính margin của CSS.

Khả năng tương thích trình duyệt

<dl>, <dt> và <dd> tương thích trên tất cả các phiên bản và loại trình duyệt của máy tính cũng như thiết bị cầm tay.