- `` là phần tử HTML dùng để biểu đạt về mặt ngữ nghĩa một danh sách các cặp tên–giá trị, phù hợp với các mẫu UI như tiện nghi, hạng mục tính phí, hoặc bảng thuật ngữ kỹ thuật
- Danh sách mô tả có cấu trúc đặt tên bằng
** và **giá trị bằng bên trong ``, và một tên có thể đi kèm nhiều giá trị
- Khi cần nhóm các
và liên quan để phục vụ styling, theo đặc tả chỉ có wrapper `` mới có thể bao quanh nhóm đó
- Nếu chỉ dùng các
lồng nhau, công nghệ hỗ trợ sẽ khó nhận ra mẫu danh sách, nhưng mang lại lợi thế điều hướng như số lượng mục, vị trí hiện tại, và khả năng bỏ qua cả danh sách
- Ngay cả dữ liệu số liệu, năng lực và hành động có hình thức khác nhau như stat block của Dungeons & Dragons cũng có thể được chia thành các danh sách mô tả, cho thấy tính linh hoạt rộng rãi của nó
Mẫu mà `` biểu đạt
- `` là phần tử HTML biểu đạt một danh sách các cặp tên–giá trị, mang lại ý nghĩa ngữ nghĩa cho một mẫu xuất hiện lặp đi lặp lại trong UI web
- Các cấu trúc ghép cặp tên và giá trị như tiện nghi chỗ ở, các hạng mục tính phí tiền thuê, hay bảng thuật ngữ kỹ thuật là những ứng viên tiêu biểu
không phải là phần tử đứng một mình mà tạo thành nhóm tên–giá trị bằng tổ hợp ba phần tử, , - Trước HTML5, `` được gọi là definition list, ban đầu dùng để biểu đạt bảng thuật ngữ gồm thuật ngữ và định nghĩa
Cấu trúc cơ bản của danh sách mô tả
-
, , ``
- **
** bao bọc toàn bộ danh sách mô tả, tương tự vai trò của hoặc `` khi bao trọn cả danh sách
** là description term, biểu thị tên; còn ** là description detail, biểu thị giá trịvà trước đây cũng lần lượt được biết đến là definition term và definition detail- Cấu trúc cơ bản là một
theo sau bởi một
Title
Designing with Web Standards
-
Nhiều cặp tên–giá trị
- Để thêm các cặp tên–giá trị khác trong cùng một danh sách, chỉ cần đặt tiếp các
và mới
Title
Designing with Web Standards
Publisher
New Riders Pub; 3rd edition (October 19, 2009)
-
Một tên với nhiều giá trị
- Một
có thể có nhiều **giá trị**
- Có thể biểu đạt trực tiếp cấu trúc một tên đi kèm nhiều giá trị, chẳng hạn như khi một cuốn sách có nhiều tác giả
Title
Designing with Web Standards
Author
Jeffrey Zeldman
Ethan Marcotte
Publisher
New Riders Pub; 3rd edition (October 19, 2009)
-
Wrapper để styling
- Khi cần nhóm các
và liên quan cho mục đích styling, có thể dùng wrapper ``
- Theo đặc tả, phần tử wrapper duy nhất có thể bao quanh một nhóm
/ là ``
- Có thể xem thêm về cấu trúc được cho phép và các ràng buộc chi tiết trong tài liệu `` của MDN hoặc đặc tả HTML
Title
Designing with Web Standards
Author
Jeffrey Zeldman
Ethan Marcotte
Vì sao cần ngữ nghĩa
- Các nhóm tên–giá trị có thể được tạo ra về mặt thị giác chỉ bằng các `` lồng nhau, nhưng trình duyệt hoặc công nghệ hỗ trợ sẽ khó nhận ra đây là một mẫu danh sách
- Việc chọn phần tử ngữ nghĩa có thể được quyết định dựa trên việc khi máy tính nhận ra mẫu đó thì người dùng có nhận được lợi ích thực tế hay không
- Khi dùng ``, người dùng trình đọc màn hình có thể điều hướng danh sách các nhóm tên–giá trị dễ dàng hơn
- Có thể biết số lượng nhóm tên–giá trị trong danh sách
- Có thể xác định mình đang ở vị trí nào trong danh sách hiện tại
- Nếu không quan tâm, có thể bỏ qua toàn bộ danh sách như một khối
- Với cấu trúc
lồng nhau, mỗi tên và giá trị được xử lý như các nút văn bản độc lập, còn thì gán ý nghĩa cấu trúc cho cùng một thông tin
- Những lợi ích này thực sự có sẵn khi dùng `` trong phần lớn các tổ hợp trình duyệt/trình đọc màn hình
- Tuy vậy, vì hỗ trợ cho
vẫn chưa thực sự phổ biến ở mọi nơi, nếu trải nghiệm fallback dưới dạng các nút văn bản độc lập là chưa đủ tốt thì bạn cũng có thể chọn phần tử khác như cho đến khi mức hỗ trợ được cải thiện
Ví dụ stat block của Dungeons & Dragons
- Stat block của Dungeons & Dragons là một ví dụ có nhiều cặp tên–giá trị, và trong một stat block có thể tìm thấy nhiều ứng viên cho danh sách mô tả
- Có thể tách các chỉ số cơ bản như Armor Class, Hit Points, Speed; các chỉ số năng lực như STR, DEX; thông tin thành thạo như Senses, Languages, Challenge; cùng với Traits và Actions thành các danh sách mô tả riêng
- Ngay cả danh sách chỉ số năng lực và danh sách đòn tấn công có hình thức trực quan khác nhau cũng đều có thể được biểu đạt bằng mẫu danh sách mô tả
- Khi cần phân biệt nhiều danh sách mô tả hoặc liên kết chúng với tiêu đề, có thể dùng
aria-label và aria-labelledby
- Markup này chỉ là một trong nhiều cách khả thi, và cho thấy mẫu `` linh hoạt đến mức có thể áp dụng cho các nhóm dữ liệu với hình thức khác nhau
2 bình luận
Ý kiến trên Lobste.rs
Tuy vậy, đúng là phần lớn các trình triển khai không hỗ trợ. Trong khi đó, hệ thống dàn trang/ngôn ngữ đánh dấu Typst cung cấp danh sách mô tả như một cú pháp hạng nhất, chẳng hạn
/ term: description, nên theo tôi nó cũng kết hợp rất tốt với danh sách đầu dòng-hay danh sách đánh số tự động+<details>, nó chắc chắn thuộc nhóm đầu bảng. Tôi mong sẽ có nhiều phần tử tương tác như thế này hơn<dt>. Có thể dùng để biểu diễn những thứ như từ đồng nghĩa trong danh sách kiểu từ điểnKhi tạo kiểu bằng CSS thì nên làm quen với bộ chọn anh em liền kề
Tham khảo: https://developer.mozilla.org/en-US/docs/…
Ý kiến trên Hacker News
Chỗ này sai:
không có vai trò ngầm định tương ứng, nhưng có thể gán các vai trò `group`, `list`, `none`, `presentation` `aria-label` chỉ có thể được định nghĩa trên các phần tử có vai trò tương thích, dù là ngầm định hay tường minh, và dù `aria-label` được cho phép với đa số vai trò, ở đây `presentation` và `none` bị loại nên chỉ còn `group` và `list` `group` thì gượng gạo còn `list` thì chấp nhận được, nên kết luận là **bỏ `aria-label` đi** hoặc thêm `role="list"`. Khi đó các phần tử con cũng sẽ cần `role="listitem"` Điều bài viết bỏ sót làkhông chỉ xuất hiện một lần mà có thể có nhiều cái liên tiếp. Ví dụ trong đặc tả rất hay: https://html.spec.whatwg.org/multipage/grouping-content.html... Đây không phải cặp tên-giá trị mà là nhóm tên-giá trịrole="listitem"vào phần tửbao quanhvàkhông? Có vẻ `role="listitem"` được cho phép trên, nhưng trong trường hợp nhiềuđược nhóm lại với nhau thì có vẻ không chính xác, và tôi cũng không rõ liệu nó có làm hỏng cáchvốn được diễn giải như thuật ngữ hay khôngCó lẽ ý này không được ưa chuộng ở đây, nhưng cuộc sống của tôi dễ hơn nhiều kể từ khi ngừng cố dùng semantic HTML. Thiết kế của nó đơn giản là không ổn Mỗi lần định dùng
là rồi cũng hối hận. Vì cuối cùng lại cần nhiều lớp wrapper, hoặc cần đường phân cách giữa các section, hoặc cần icon, hoặc cần tiêu đề trải qua nhiều cặp key-value Nó có chút linh hoạt, nhưng còn lâu mới đủ để thực sự gánh nổi khái niệm khái quát mà nó tự nhận. Dĩ nhiên tôi vẫn dùng những phần tử tương ứng có lợi ích quan sát được như, ``, nhưng nếu nó không thật sự khớp với mô hình dữ liệu và còn phải ghi đè mọi thứ thì đó không phải lựa chọn thực dụng Nếu 99% cách dùng đều là lách qua API thì có lẽ nói rằng đó là lỗi của API cũng không phải điều gì gây tranh cãi lắmdocument.speakText. Cái họ thực tế có là một API kỳ quặc đọc nội dung khi văn bản trên trang thay đổi. Phải nối hai thứ đó lại với nhau, và ngay cả khi làm tốt thì vẫn khó và rất giống hack. Nhưng ít nhất cách live region hẳn là HTML thuần ngữ nghĩadisplay:contentscho phép bỏ wrapper, tôi nghĩ cũng nên có cách nhóm các phần tử như thể chúng có chung một tổ tiên:wrap(dt, dt+dd) {border: solid 1px}402 Payment Required,407 Proxy Authentication Required,508 Loop Detectedtrông như những nỗ lực nhét các chức năng đặc thù của một ứng dụng hay kiểu triển khai nào đó vào nền tảng của web Tôi không hiểu vì sao nhu cầu cụ thể của những người viết RFC lại được triển khai ở tầng nền của web, còn nhu cầu của tôi thì phải đi tìm chỗ vô tình trùng khớp rồi nhồi mọi thứ đặc thù ứng dụng vào400 Bad Requesthay500 Internal Server Error. Mỗi lần thấy một web app thực sự tận dụng nhiều hơn mức tối thiểu các mã trạng thái HTTP là tôi lại đảo mắt. Những thứ đó nên nằm ở tầng ứng dụng. Giao thức này không được tạo ra cho bạn, mà chủ yếu cho các ứng dụng LAMP stack vốn phục vụ tài sản tĩnhMột bài học lịch sử về list. Nếu xem manual DCF/GML của IBM năm 1985 bên dưới, DL-DT-DD đã tồn tại từ trước web Trong tài liệu hơn 40 năm tuổi đó, ngoài Definition lists (DL) còn có Glossary lists (GL), Ordered lists (OL), Unordered lists (UL), Simple lists (SL) ibm :: 370 :: DCF :: SH35-0050-2 Document Composition Facility Generalized Markup Language Implementation Guide Rel 3 Mar85 https://archive.org/details/bitsavers_ibm370DCFSpositionFaci...
:p., thay vì `thì dùng:li.`. Vào khoảng 1990–1991 khi TBL đang phát triển HTML và HTTP, cũng có một nỗ lực gọi là HyTime, một ứng dụng SGML tập trung vào hypermedia. HTML đã nhanh chóng vượt qua nó Xem https://en.wikipedia.org/wiki/Charles_Goldfarb về Charles Goldfarb, người dẫn dắt GML/SGML, và https://en.wikipedia.org/wiki/Standard_Generalized_Markup_La... về SGMLWebsite đầu tiên trên thế giới dùng `` rất nhiều https://info.cern.ch/hypertext/WWW/TheProject.html https://info.cern.ch/ là kiểu landing page cung cấp bối cảnh và định hướng về website đầu tiên thực sự
Native GUI toolkit thì chết sạch rồi, còn bây giờ người ta có thể viết cả bài luận dài về một phần tử HTML. Không rõ đây có phải tiến bộ không
Trước HTML5 người ta gọi đây là definition list, và giờ tôi mới biết ban đầu `` chỉ nhằm biểu diễn glossary gồm các thuật ngữ và định nghĩa. Hóa ra tôi đã gọi sai tên suốt 10 năm
bgiờ lại có nghĩa là “bring attention to”. Đúng là bó tayBài viết hay. Nếu bắt bẻ rất nhỏ thì phần tử
smallkhông nên dùng cho phụ đề, mà mục đích đó nên dùng phần tửhgroupPhần tửsmallbiểu thị chú thích phụ như chữ nhỏ. Chữ nhỏ thường chứa tuyên bố miễn trừ trách nhiệm, cảnh báo, giới hạn pháp lý, bản quyền. Đôi khi cũng dùng để đáp ứng yêu cầu ghi nguồn hoặc giấy phép (https://html.spec.whatwg.org/multipage/text-level-semantics....)Có một ghi chú hữu ích về việc screen reader hỗ trợ `` tốt đến mức nào: https://adrianroselli.com/2025/01/updated-brief-note-on-desc...
Nhìn ví dụ cuối cùng về bảng chỉ số DnD làm tôi tự hỏi liệu lồng `` có hợp lệ không Ví dụ có thể làm kiểu
Actions ...không?Tôi thích
. Ít nhất thì trong quá khứ, có vẻ table bị lạm dụng nhưcòn nhiều hơn, và sự bất tiện của markup table còn tệ hơn cả dùng nhiềudivfirstsecondwhateverTôi thấy nó còn đơn giản và gọn hơn mọi cú pháp bảng Markdown