<dl>: Phần tử Danh sách mô tả
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Phần tử <dl> trong HTML đại diện cho một danh sách mô tả. Phần tử bao gồm một danh sách các nhóm thuật ngữ (được chỉ định bằng phần tử <dt>) và các mô tả (được cung cấp bởi các phần tử <dd>). Các cách sử dụng phổ biến cho phần tử này là triển khai bảng thuật ngữ hoặc hiển thị siêu dữ liệu (danh sách các cặp khóa-giá trị).
Try it
<p>Cryptids of Cornwall:</p>
<dl>
<dt>Beast of Bodmin</dt>
<dd>A large feline inhabiting Bodmin Moor.</dd>
<dt>Morgawr</dt>
<dd>A sea serpent.</dd>
<dt>Owlman</dt>
<dd>A giant owl-like creature.</dd>
</dl>
p,
dt {
font-weight: bold;
}
dl,
dd {
font-size: 0.9rem;
}
dd {
margin-bottom: 1em;
}
Thuộc tính
Phần tử này cũng chấp nhận các thuộc tính toàn cục.
compactDeprecated-
Thuộc tính Boolean này gợi ý rằng danh sách nên được hiển thị theo kiểu compact. Cách hiểu thuộc tính này phụ thuộc vào trình duyệt. Hãy sử dụng CSS thay thế: để tạo hiệu ứng tương tự thuộc tính
compact, thuộc tính CSSline-heightcó thể được sử dụng với giá trị80%.
Khả năng tiếp cận
Mỗi trình đọc màn hình trình bày nội dung <dl> theo cách khác nhau, bao gồm tổng số, ngữ cảnh thuật ngữ/định nghĩa và phương thức điều hướng. Những sự khác biệt này không nhất thiết là lỗi.
Kể từ iOS 14, VoiceOver sẽ thông báo rằng nội dung <dl> là một danh sách khi điều hướng bằng con trỏ ảo (không phải qua lệnh đọc tất cả). VoiceOver không hỗ trợ các lệnh điều hướng danh sách với <dl>. Hãy cẩn thận khi áp dụng vai trò ARIA term và definition cho các cấu trúc <dl> vì VoiceOver (macOS và iOS) sẽ điều chỉnh cách chúng được thông báo.
Ví dụ
Một thuật ngữ và một mô tả
<dl>
<dt>Firefox</dt>
<dd>
A free, open source, cross-platform, graphical web browser developed by the
Mozilla Corporation and hundreds of volunteers.
</dd>
<!-- Other terms and descriptions -->
</dl>
Kết quả
Nhiều thuật ngữ, một mô tả
<dl>
<dt>Firefox</dt>
<dt>Mozilla Firefox</dt>
<dt>Fx</dt>
<dd>
A free, open source, cross-platform, graphical web browser developed by the
Mozilla Corporation and hundreds of volunteers.
</dd>
<!-- Other terms and descriptions -->
</dl>
Kết quả
Một thuật ngữ, nhiều mô tả
<dl>
<dt>Firefox</dt>
<dd>
A free, open source, cross-platform, graphical web browser developed by the
Mozilla Corporation and hundreds of volunteers.
</dd>
<dd>
The Red Panda also known as the Lesser Panda, Wah, Bear Cat or Firefox, is a
mostly herbivorous mammal, slightly larger than a domestic cat (60 cm long).
</dd>
<!-- Other terms and descriptions -->
</dl>
Kết quả
Nhiều thuật ngữ và nhiều mô tả
Cũng có thể xác định nhiều thuật ngữ với nhiều mô tả tương ứng, bằng cách kết hợp các ví dụ trên.
Siêu dữ liệu
Danh sách mô tả hữu ích cho việc hiển thị siêu dữ liệu dưới dạng danh sách các cặp khóa-giá trị.
<dl>
<dt>Name</dt>
<dd>Godzilla</dd>
<dt>Born</dt>
<dd>1952</dd>
<dt>Birthplace</dt>
<dd>Japan</dd>
<dt>Color</dt>
<dd>Green</dd>
</dl>
Kết quả
Mẹo: Có thể hữu ích khi xác định dấu phân cách khóa-giá trị trong CSS, chẳng hạn như:
dt::after {
content: ": ";
}
Bọc các nhóm tên-giá trị trong các phần tử div
HTML cho phép bọc mỗi nhóm tên-giá trị trong phần tử <dl> bằng một phần tử <div>. Điều này có thể hữu ích khi sử dụng microdata, hoặc khi các thuộc tính toàn cục áp dụng cho toàn bộ nhóm, hoặc cho mục đích tạo kiểu.
<dl>
<div>
<dt>Name</dt>
<dd>Godzilla</dd>
</div>
<div>
<dt>Born</dt>
<dd>1952</dd>
</div>
<div>
<dt>Birthplace</dt>
<dd>Japan</dd>
</div>
<div>
<dt>Color</dt>
<dd>Green</dd>
</div>
</dl>
Kết quả
Ghi chú
Đừng sử dụng phần tử này (cũng như các phần tử <ul>) chỉ để tạo thụt lề trên trang. Mặc dù nó hoạt động, đây là thực hành không tốt và che giấu ý nghĩa của danh sách mô tả.
Để thay đổi thụt lề của thuật ngữ mô tả, hãy sử dụng thuộc tính CSS margin của CSS.
Tóm tắt kỹ thuật
| Danh mục nội dung |
Nội dung luồng, và nếu các con của phần tử <dl> bao gồm một
nhóm tên-giá trị, nội dung hữu hình.
|
|---|---|
| Nội dung được phép |
Hoặc: Không hoặc nhiều nhóm, mỗi nhóm bao gồm một hoặc nhiều phần tử
|
| Bỏ qua thẻ | Không, cả thẻ mở và thẻ đóng đều bắt buộc. |
| Phần tử cha được phép | Bất kỳ phần tử nào chấp nhận nội dung luồng. |
| Vai trò ARIA ngầm định | Không có vai trò tương ứng |
| Vai trò ARIA được phép |
group,
list, none, presentation
|
| Giao diện DOM | HTMLDListElement |
Thông số kỹ thuật
| Specification |
|---|
| HTML # the-dl-element |