Có cách nào hợp lệ để bao gồm dt và dd với phần tử HTML không?

Question

Tôi muốn HTML có thể làm điều gì đó về mặt ngữ nghĩa tương đương với điều này;

<dl class="main-list"> 
    <definitionitem> 
     <dt>Some Thing</dt> 
      <dd>You know it!</dd> 
     <dt>Another Thing</dt> 
      <dd>Word.</dd> 
    </definitionitem> 
    <definitionitem> 
     <dt>Stuff</dt> 
      <dd>Alright!</dd> 
    </definitionitem> 
</dl> 

Tuy nhiên, vì gần nhất tôi đến là điều tôi không hài lòng 100% với ngữ nghĩa;

<div class="redundant-wrapper"> 
    <dl class="main-list"> 
     <dt>Some Thing</dt> 
      <dd>You know it!</dd> 
     <dt>Another Thing</dt> 
      <dd>Word.</dd> 
    </dl> 
    <dl class="another-main-list"> 
     <dt>Stuff!</dt> 
      <dd>Alright!</dd> 
    </dl> 
</div> 

Tôi đã tự hỏi liệu có ai có ý tưởng nào khác về cách bạn có thể thực hiện việc này không?

Ngoài ra, lý do các mục sẽ được nhóm là vì chúng được nhóm trực quan trong nội dung đang được đánh dấu. Hãy tưởng tượng một trang từ điển, với một danh sách định nghĩa duy nhất, trong đó mỗi định nghĩa nằm trong một hộp inset được làm nổi bên trái. Tôi luôn gặp phải tình huống này.

Answer 1

Không, Ian Hickson (biên tập đặc tả HTML) là convinced rằng đây là một vấn đề CSS, HTML không phải là một ai:

này không cần thiết. Đó là một hạn chế của CSS.

Giải pháp đúng là để CSS cung cấp một số phần tử giả hoặc cơ chế giới thiệu một vùng chứa ẩn danh vào kết xuất các hình ảnh mà bạn muốn bọc.

Đồng thời, fantasai (CSS editor spec) được thuyết phục trong contrary:

Tôi không nghĩ rằng đây là một vấn đề CSS. Tôi nghĩ rằng đó là một vấn đề HTML. Các phần tử giả là một điều không quan trọng đối với thông số kỹ thuật và một điều không quan trọng cần thực hiện và một điều tương đối khó hiểu để sử dụng.

Tuy nhiên, Ian rõ ràng bỏ qua điều đó và tiếp tục tách rời khỏi thực tế.

Có cùng vấn đề với LEGEND (mà phải là con trực tiếp đầu tiên của FIELDSET theo HTML spec), FIGCAPTION (mà phải là người đầu tiên/cuối cùng con trực tiếp của FIGURE), và LI (con trực tiếp của UL/OL).

Đối với DT/DD nói riêng, cá nhân tôi sử dụng danh sách UL với DL bên trong mỗi người LI:

<ul> 
    <li><dl> 
     <dt>Lorem</dt> 
     <dd>Lorem definition</dd> 
    </dl></li> 

    <li><dl> 
     <dt>Ipsum</dt> 
     <dd>Ipsum definition</dd> 
    </dl></li> 
</ul> 

Vì vậy, chúng tôi có DL để làm cho mối quan hệ giữa DT và DD, và UL danh sách việc cần làm cho họ tất cả thuộc về một danh sách.

Cập nhật (2016/11/14): Tiêu chuẩn HTML (WHATWG version cho bây giờ) bây giờ (kể từ 2016/10/31) allows yếu tố DIV (tùy chọn trộn lẫn với cái gọi là yếu tố kịch bản hỗ trợ SCRIPT, TEMPLATE) là con trực tiếp của các yếu tố DL.Số điện thoại HTML validator của W3C hiện không không tài khoản cho thay đổi này, nhưng thử nghiệm HTML5.org validator sẽ thực hiện.

Cập nhật (2017/01/18): Hóa ra spec không not cho phép nhiều hơn một lồng nhau DIV wrapper cho DT/DD, vì vậy tính hữu dụng của tính năng trong thực tế thực sự là rất hạn chế và UL → LI → Cách tiếp cận DL được mô tả ở đây vẫn có liên quan.