Есть ли допустимый способ обертывания dt и dd элементом HTML?

Я хочу, чтобы HTML мог сделать что-то семантически эквивалентное этому:

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

Однако, поскольку ближайший я пришел, я не на 100% удовлетворен семантикой:

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

Мне было интересно, есть ли у кого-нибудь другие идеи о том, как вы можете это сделать?

Кроме того, причина, по которой элементы будут сгруппированы, состоит в том, что они визуально группируются в размещаемом содержимом. Представьте себе страницу словаря с одним списком определений, где каждое определение находится в поле ввода, которое будет перемещено слева. Я постоянно сталкиваюсь с этой ситуацией.

Ответы

Ответ 1

Нет, Ян Хиксон (редактор спецификаций HTML) убежден, что это проблема CSS, а не HTML-код:

Это не обязательно. Это ограничение CSS.

Правильное решение состоит в том, чтобы CSS предоставлял некоторые псевдоэлементы или другие механизм, который вводит анонимный контейнер в рендеринг дерево, которое обертывает элементы, которые вы хотите обернуть.

В то же время, fantasai (редактор спецификации CSS) убежден в напротив:

Я не думаю, что это проблема CSS. Я думаю, что это проблема HTML. Псевдоэлементы - нетривиальная вещь для спецификации, а нетривиальная вещь для реализации и сравнительно запутанная вещь для использования.

Тем не менее, Ян, по-видимому, игнорирует это и продолжает отстраняться от реальности.

Существуют те же проблемы с LEGEND (это должен быть первый прямой дочерний элемент FIELDSET в соответствии со спецификацией HTML), FIGCAPTION (это должен быть первый/последний прямой дочерний элемент FIGURE) и LI (прямой дочерний элемент UL/OL).

Что касается DT/DD, в частности, я лично использую UL список с DL внутри каждого из 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>

Итак, у нас есть DL, чтобы сделать связь между DT и DD и UL list, чтобы все они принадлежали одному списку.

Обновление (2016-11-14): Стандарт HTML (версия WHATWG сейчас (с тех пор 2016-10-31) позволяет элемент DIV (необязательно, смешанный с так называемыми script -поддерживающими элементами SCRIPT, TEMPLATE) - прямые дети элементов DL. W3Cs HTML validator не учитывает это изменение, но экспериментальный HTML5. org validator делает.

Обновление (2017-01-18): Выключает спецификацию не позволяет использовать более одного вложенного DIV wrapper для DT/DD, поэтому полезность этой функции на практике очень ограничена и подход UL → LI → DL, описанный здесь, по-прежнему имеет значение.